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

使用javascript獲取ckeditor textarea的textarea值

使用javascript獲取...

一般來說,若我想使用 javascript 來得到 textarea 的值。 可以使用以下方式: 首...

如何修復Undefined Index錯誤訊息

如何修復Undefined ...

錯誤的原因是因為當我們使用 $GET 和 $POST 方法取得變數時會發生這種情況,雖然PHP的部分...

使用 .htaccess 關閉緩存

使用 .htaccess 關...

使用緩存可以提高網站的性能。 可以在.htaccess 文件集標頭中的各種指令指示瀏覽器將文件保留較...

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