跳到主要內容

透過css設定,嵌入Youtube影片維持16:9比例


【HTML】
<div class="video-container">
    <ifram ......................(拿掉寬&高的設定)</ifram>
</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%; }

【其他說明】
這裡指的是針對 Youtube 影片比例為 16:9 時的情況,若有其他比例需要再自行調整 padding-bottom 的數值