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

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

在這裡同步推薦一個我們自己設計CSS 俐落的小幫手：CSS 線上壓縮瘦身與解壓縮工具 - 一鍵 Minify & Beautify CSS，幫你完成的CSS減肥瘦身！

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>

這樣就完成了。

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