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

PDO bindParam ...

首先 bindParam 是綁定變數、bindValue  是綁定值。 以下範例： bindPara...

修改php設定

pexelsphoto55 進入系統 用文字編輯軟體打開php.ini改變以下設定 disablef...

js判斷字母是否為大小寫

使用JS來判斷字串裡是否含有大寫字母或小寫字母。 //判斷是否含有大寫字母 function chk...