[CSS]響應式網站設計(RWD)如何擺平 Youtube 的影片

Denki

RWD(Responsive Web Design)，
這個我們稱為響應式網站設計的東西，
是很方便好用，
不用再大費周章針對不同的平台設計不同的系統，
只要透過一個 CSS 的文檔，就可以一打十個 ^^

不過要用這種葉問等級的方式來設計，其中的學問倒也是不少的

其中一個最常見的問題就是嵌入 Youtube 的影片了。

Youtube 的影片或是 Vimeo 的短片，
由於都是採用嵌入的語法(iFrame)來放置到網頁中的，
一旦使用 RWD 的設計模式，
往往整個網頁都可以隨著平台不同，
而自動縮放改版，
可是這個 iFrame 嵌入的影片，
就是無動於衷，
讓好辛苦設計的網頁，
在手機上看時，
還是會出現討厭的橫向捲軸(造成可以左右移動)。

解決方法其實不難，我們可以試著這樣做：

首先，在CSS的樣式表中，加入下面的CSS Code。

/*RWD Youtube 以及 Vimeo*/

.video-container{

position:relative;

padding-bottom:56.25%;

padding-top:30px;height:0;overflow:hidden;

}

 

.video-container iframe,

.video-container object,

.video-container embed{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

然後在 Youtube 提供的嵌入 iFrame 標籤的前方，
加上 <div class=video-container>，
尾端加上 </div>
例如：

//原影片嵌入碼：

<iframe width="640" height="360" src="https://www.youtube.com/embed/mMKonMlPy0k" frameborder="0" allowfullscreen></iframe>

 

//加入 RWD 標籤：

<div class=video-container>

<iframe width="640" height="360" src="https://www.youtube.com/embed/mMKonMlPy0k" frameborder="0" allowfullscreen></iframe>

</div>