使用CSS實現彈性影片html5案例實踐_html5教學技巧

當我編碼Elemin Theme（我最近設計的一個響應式的站點）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓html5的video標籤很好的工作，但這個解決方案不適用於iframe 或 object標籤的內嵌程式碼。透過幾個小時的尋找資料和實驗，我最終找到了解決方案。當你在進行響應式設計的時候，這項css技巧能派上用場。

靈活的html5 video標籤
使用html5的video，可以透過設定max-width:100%讓他變得靈活。前面的介紹中，已經提到他不適用於常用的iframe和object中的內嵌程式碼。

複製程式碼

程式碼如下:

video {
max-width: 100%;
height: auto;
}

靈活的Object & Iframe 內嵌影片
這個技巧相當簡單，你需要為video添加一個

容器，並且將div的padding-bottom屬性值設定在50%到60%之間。然後設定子元素（ifame或object）的width和height為100%，並使用絕對定位。這樣會迫使內嵌物件自動擴充到最大。
CSS

複製程式碼

複製程式碼

代碼如下:
>.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hiddenpx;
height: 0;
overflow: hiddenpx;
height: 0;
overflow: hidden>;
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0

>width: 100%;
height: 100%; }

HTML

複製程式碼

程式碼如下:

在固定寬度下實現靈活性

如果限制了視訊的寬度，那麼我們需要一個額外的

容器包裹video，並為div設定固定寬度和max-width:100% 。

CSS

複製程式碼

程式碼如下:

程式碼如下:width: 600px;
max-width: 100%;
}

HTML

HTML

複製🎜>代碼


代碼如下:

div>

相容性 這個技巧支援所有的瀏覽器，包括：Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和iPad。