網頁中嵌入的影片自適應 (RWD) 調整

嵌入的影片自適應 (RWD) 調整:

  也就是嵌入 (iframe) 在網頁中的影片寛和高,會隨著您視窗大小來自動調整,用電腦、手機、平板....等等來觀看,都會即時自動縮放適應當下的寛度唄! ^^

   Bootstrap 3.2 以後的版本,就已支援 iframe 自適應的調整了,甚至連高度也跟著一起作變化。網頁嵌入 YouTube、fb....影片都支援 RWD 自適應調整了。所以網頁只要引入 bootstrap.min.css 就成功一半囉!^^

Bootstrap 主站及下載:https://getbootstrap.com/

本小站下載:含 Bootstrap 3.3.7 ~ 4.3.1 & jQuery 1.11.3 ~ 3.4.1

範例:主要看紅色字部份,或直接複製所有程式碼,另存成一個 html 檔來觀看唄 ^^

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>喵喵笨兔 の 喵喵的家~遊戲天地 - 網頁中嵌入的影片自適應 (RWD) 調整</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>

      <div class="container">
         <div class="embed-responsive embed-responsive-16by9">
           <iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/rIbq129KyTk" frameborder="0" allowfullscreen></iframe>
         </div>
      </div>

      </body>
      </html>
    
說明:

(1) 把要嵌入影片的 iframe 包在兩層 div 內,程式碼內用笨兔放在 YouTube 的閃之軌跡影片嵌入( iframe) 程式碼為例,其中的 width 寛度和 height 高度設定刪除 (不刪其實也沒差)。
(2) 第一層 div,class 要設 container
(3) 第二層 div,class 要設 embed-responsive embed-responsive-16by9。16by9 代表影片是16:9,若是4:3要改為4by3。
(4) iframe class 要設 embed-responsive-item,如此 RWD 自適應調整即可大功告成 ^^。

以下為範例程式碼執行後的結果畫面,您可改變瀏覽器的視窗大小來觀看,或者用手機、平板來觀看,就可看出影片大小隨著自適應效果在縮放了唄!^^

笨兔隨手筆記於 2017/09/16

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv