文章專區

網頁設計相關文章

如何將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:用於修正的高度,可用25px30px


2.youtube提供的iframe原始碼加入

EX:

 

影片實例:

可以縮放視窗看看實際效果唷!

以上,就可以使youtube影片100%自動縮放瞜!這是在RWD設計裡相當實用的基本技巧。