HTML5實踐 — 使用CSS 實現彈性視頻

文章目錄

• 　　在固定寬度下實現靈活性
• 　　相容性

　　轉載請註明原文地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html

 

　　當我編碼Elemin Theme（我最近設計的一個響應式的網站）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓html5的video標籤很好的工作，但是這個解決方案不適用於iframe 或者 object標籤的內嵌代碼。通過幾小時的尋找資料和實驗，我最終找到瞭解決辦法。當你在進行響應式設計的時候，這一css技巧能派上用場。你可以訪問最終demo地址，縮放你的瀏覽器查看效果。

 

　　demo查看地址：http://webdesignerwall.com/demo/elastic-videos

 

　　靈活的html5 video標籤（demo）

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

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

 

　　靈活的 Object & Iframe 內嵌視頻

　　這個技巧相當簡單，你需要為video添加一個<div>容器，並且將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: hidden;}.video-container iframe,  .video-container object,  .video-container embed {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

 

　　 HTML

<div class="video-container">    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></div>

 

　　在固定寬度下實現靈活性

　　如果限制了視頻的寬度，那麼我們需要一個額外的<div>容器包裹video，並為div設定固定寬度和max-width:100%。

　　 CSS

.video-wrapper {    width: 600px;    max-width: 100%;}

 

　　 HTML

<div class="video-wrapper">    <div class="video-container">        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>    </div>    <!-- /video --></div><!-- /video-wrapper -->

 

　　相容性

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

 

　　原文地址：http://webdesignerwall.com/tutorials/css-elastic-videos

 

HTML5實踐系列