這篇文章將為大家詳細講解有關如何使用CSS實現彈性視頻，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯主營鄯善網站建設的網絡公司,主營網站建設方案,App定制開發,鄯善h5小程序開發搭建,鄯善網站營銷推廣歡迎鄯善等地區企業咨詢

當我編碼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>容器，并且將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。

關于“如何使用CSS實現彈性視頻”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章名稱：如何使用CSS實現彈性視頻-創新互聯
瀏覽路徑：http://vcdvsql.cn/article32/ppjsc.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、靜態網站、做網站、網站設計公司、網站營銷、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯