Bootstrap教學-網頁嵌YouTube影片也支援RWD自適應調整

梅問題-Bootstrap教學-讓網頁嵌YouTube影片也支援自適應
  人家說有圖有真相,有影片賴不掉,透過影片可讓人更容易理解,因此這時就會將錄製好的影片,上傳到一些影音平台中,再把影片嵌入自己的網頁中,但網頁有設計RWD自適應網頁時,則會發現到,所有的區塊都會隨著螢幕解析跟著縮放與調整,但影片卻偏偏就不為所動,這就得再為嵌入的iframe來進行設定,才能解決此問題,其實還有更簡易的方法,當RWD自適應網頁,是採用Bootstrap的朋友有福啦!自從Bootstrap 3.2以後的版本,就已支援iframe自適應的調整了,甚至連高度也跟著一起作變化,且用法相當的簡單,因此還不知道的朋友,現在也一塊來看看吧!!!

Step1
首先,找到影片後,將影片嵌入的碼全部複製起來。
梅問題-Bootstrap教學-讓網頁嵌YouTube影片也支援自適應
Step2
將它貼在body的container區塊中。
梅問題-Bootstrap教學-讓網頁嵌YouTube影片也支援自適應
Step3
接著先把iframe的寬高給刪除,接著在iframe中加入embed-responsive-item的class,並再包一層div,並加入embed-responsive embed-responsive-16by9,這邊要特別留一下,16by9代表影片是16:9,若是4:3要改為4by3
梅問題-Bootstrap教學-讓網頁嵌YouTube影片也支援自適應
Step4
當完成後,立馬來檢測一下,這時在拖視窗改變解析時,影片除了寬會跟著調整外,就連高度也會跟著一塊作調整,是不是超ez的呀!!
梅問題-Bootstrap教學-讓網頁嵌YouTube影片也支援自適應
[範例預覽] [範例下載]

相關文章

「Bootstrap3 Resize Tool」Bootstrap自適應網頁螢幕版型檢測工具

「Bootstrap3 Resize Tool」Bootstrap自適應網頁螢幕版型檢測工具

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    巧巧 說道:

    請問如果是想把影片設定在三欄的格子裡(我是設定在col-md-4裡面 本來是限制固定寬度)
    但是在手機板(col-xs-12 就會變很小)
    所以過來看到您這篇文章
    RWD該怎麼調整比較好
    一定要包在container裡面嗎 太多層了 結果影片變超級小

    回應:
    col-xs-12寬度是100%,影片若是16:9會比較小一點,
    若是4:3的比例就會比較大一些

近期講座

2017 (二月講座)

更多講座