在製作網頁時很常遇到，網站內需要嵌入 Youtube 影片，但影片無法跟隨螢幕尺寸縮放的問題。
通常使用 Youtube 分享功能嵌入的 iframe 原始碼，已經提供固定尺寸，若是拿掉寬度與高度又會跑版，這時候就需要修改 CSS，來達到影片的 RWD（響應式） 效果。

本篇文章會分享，如何利用 CSS 達到 iframe 影片自適應螢幕尺寸的方法。

步驟一

首先，請找到一個 Youtube 影片，筆者用以下 Youtube 影片為範例。

Youtube by Living Coffee: Smooth Jazz Radio - Relaxing Jazz & Sweet Bossa Nova for Calm at Home

點選影片的分享功能，選擇「嵌入」，會跳到以下畫面，請把右方的 iframe 原始碼 複製起來，貼到需要放影片的地方。

iframe 原始碼

<iframe width="560" height="315" src="https://www.youtube.com/embed/SORD03t7nlo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

接著請在 iframe 的外面包一層 div（筆者命名為 videobox），利用 videobox 來控制大小縮放的比例，並清除掉多餘的 Code。
width 和 height 也一並清除，得到一個乾淨的 iframe。

<div class="videobox">
<iframe frameborder="0" src="https://www.youtube.com/embed/SORD03t7nlo" allowFullScreen="true">
</iframe>
</div>

這時候的 iframe 影片會如同下圖，小小一個。

步驟二

關鍵的來了！請在 CSS 的部分加入以下程式碼：

CSS

.videobox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

用途在於將 iframe 的寬度與高度設定 100%，並絕對定位於外層 videobox，且自適應 videobox 的大小比例做伸縮。

padding-bottom: 56.25% 為影片高度與寬度的比例 16:9 計算得來。

也就是 16 : 9 時 ➞ 9 / 16 = 56.25%
當影片是 4 : 3 時 ➞ 3 / 4 = 75%
直式影片 3 : 4 = 133%

以上引用自 DREAM TALKER - Youtube iframe 自動縮放

步驟三：獲得一個 RWD 的 iframe 影片

可以縮放筆者的範例看看實際效果 ➜ Codepen

大螢幕時：

小螢幕時：

以上是在製作網頁上很實用的 iframe 影片技巧，希望可以幫助到有需要的朋友：）