Loading...
Mark ChangMark 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

作者簡介

Mark Chang

離不開電腦的宅男

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

文件上傳過程中使用白名單、黑名單、或者MIME做認證

文件上傳過程中使用白名單、黑名單、或者MIME做認證

pexelsphotolock 是不是被資安的問題搞得很煩? 我想,在建置系統的過程中...

在PHP中通過POST發送JSON

在PHP中通過POST發送JSON

這回,我遇到需要通過POST請求發送JSON到API。 剛好利用這次的機會紀錄一下: ...

如何將mysql table auto_increment重設

如何將mysql table auto_increment重設

photo 資料表裡的資料加加減減,一不小心突然驚覺當初的欄位長度設定的不夠⊙⊙ 當然...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。