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

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/_sxQ0dpNMDw" frameborder="0" allowfullscreen></iframe>
 
//加入 RWD 標籤:
<div class=video-container>
<iframe width="640" height="360" src="https://www.youtube.com/embed/_sxQ0dpNMDw" frameborder="0" allowfullscreen></iframe>
</div>

 
這樣就完成了。
 
影片嵌入就會是下面這樣(用手機看看是不是縮小了呢 ^^):
 

 

Readers comment