Loading...

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

Temperature: 0 °C

Mark ChangMark Chang
author_tools


使用CSS讓Youtube自動適應寬度跟高度
在播放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如何移除 x-powered-by 資訊

PHP如何移除 x-powe...

xpoweredby 主動披露使用程式版本訊息,增加資安風險。 可透過以下方式隱藏 xpowered...

使用jquery判斷上傳檔案大小

使用jquery判斷上傳檔案...

首先得引用jquery var fileSize = document.getElementById...

分享 斜槓青年正夯,什麼都會才是王道?他舉賈伯斯、巴菲特為例,勸你萬萬不可跨領域-風傳媒

分享 斜槓青年正夯,什麼都會...

巴菲特:「了解自己的能力圈,待在裡面。這個圈圈到底有多大其實無關緊要。知道圈圈的邊線究竟在哪則非常重...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format