使用CSS讓Youtube自動適應寬度跟高度
Temperature: 0 °C
在播放Youtube影音的時候，常使用 iframe 的方式崁入網頁裡。
例如:
<iframe src="URL" frameborder="0" data-devanime="fadeIn" data-devanime-delay="0.6s"></iframe>
但往往展開的影音卻無法自動適應高度填滿整個DIV位置。
這時可以透過以下CSS設定來解決這個問題。
.video-div {
position: relative;
width:100%;
height: 100%;
overflow: hidden;
}
.video-div iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}接著將 iframe 包在DIV裡如下範例:
<div class="video-div">
<iframe src="URL" frameborder="0" data-devanime="fadeIn" data-devanime-delay="0.6s"></iframe>
＜/div＞