innstory

使用CSS讓Youtube自動適應寬度跟高度

Temperature: 0 °C

2018-04-06 Mark Chang

在播放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＞

https://innstory.com/story-使用CSS讓Youtube自動適應寬度跟高度-1582

• 
• 
• 
• 
• 

CSS

Prev

 使用CSS讓整個網頁由彩色變黑白色！

Next

分享_aha__Take_On_Me_Official_Video 

About the Author

Mark Chang

離不開電腦的宅男

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

PHP 運算次方pow() ...

使用pow() 函数返回 x 的 y 次方。 例如： BMI = 體重（公斤）除以身高（公尺）的平方...

PHP使用array_pro...

arrayproduct()是PHP中的一個內建函數，可以返回陣列中所有元素的乘積。 例如 $arr...

JavaScript 搜尋字...

在 JavaScript 做搜尋並取代字串可以使用 replace() replace() 適用於在...