文章專區
網頁設計相關文章
如何將youtube影片嵌入RWD(自適應網頁)
在作網頁設計時常常需要嵌入youtube影片,但一碰到RWD網頁時,影片就會遇上無法隨著螢幕縮放的問題!這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了,因此我們需要修改以讓影片能跟著RWD一同縮放。
步驟相當簡單:
1.首先在CSS列表中新增以下CSS
.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%;}
padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來,9除以16=0.5625換算高度比0.5625=56.25%
padding-top: 30px:用於修正的高度,可用25px或30px
2.在youtube提供的iframe原始碼加入
影片實例:
可以縮放視窗看看實際效果唷!
以上,就可以使youtube影片100%自動縮放瞜!這是在RWD設計裡相當實用的基本技巧。