這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS實現(xiàn)彈性視頻，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
當(dāng)我編碼Elemin Theme（我最近設(shè)計的一個響應(yīng)式的站點）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓html5的video標(biāo)簽很好的工作，但是這個解決方案不適用于iframe 或者 object標(biāo)簽的內(nèi)嵌代碼。通過幾小時的尋找資料和實驗，我最終找到了解決辦法。當(dāng)你在進(jìn)行響應(yīng)式設(shè)計的時候，這一css技巧能派上用場。
靈活的html5 video標(biāo)簽
使用html5的video，可以通過設(shè)置max-width:100%讓他變得靈活。前面的介紹中，已經(jīng)提到他不適用于常用的iframe和object中的內(nèi)嵌代碼。
重慶分公司
重慶分公司
video {
max-width: 100%;
height: auto;
}靈活的Object & Iframe 內(nèi)嵌視頻
這個技巧相當(dāng)簡單，你需要為video添加一個
.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
