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>

作者簡介

Mark Chang

離不開電腦的宅男

訪客留言

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

推薦閱讀

作者其他相關類別故事

Font Awesome Icon Sizes

Font Awesome Icon Sizes

pexelsphotoicon 紀錄一下Font Awesome icon尺寸設定...

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

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

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

jQuery resize取得瀏覽器目前視窗寬度

jQuery resize取得瀏覽器目前視窗寬度

pexelsphotokeyboard 在使用CSS調整RWD顯示時~ 也可以使用...

請選擇選項

執行錯誤

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

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

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