將youtube embed的影品隨螢幕尺寸調整比例CSS解法

2017-05-17
內嵌youtube影片或其他供應影音串流的平台最常遇到的就是iframe不知道寬高要設定為多少,尤其遇到響應式的狀況更是頭痛,今天搜尋了一下找到有個簡單的CSS解法,在這裡分享給大家。

HTML代碼
< div class="video-container">< iframe.......></iframe></div>

裡面的iframe就是我們用來內嵌的影音iframe, 我們在外面用個div把它包起來

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%;
}

這時候我們針對外面包的div做一些技巧性的css樣式,以比例方式來將我們的外框給擴展到我們要的尺寸,然後裡面的iframe則是隨著這個外框作相對的尺寸變換,效果還蠻好的大家可以參考一下

以上的樣式套起來就像下面的效果, 大家可以嘗試一下縮放視窗就可以看到效果了


來源網站: coolestguidesontheplanet.com

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【107702】
digishot webdesign studio