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

Denki

字體大小 16px

10px 32px

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>