Youtube iframe 影片自動縮放大小

步驟一

點選影片的分享功能，選擇「嵌入」，會跳到以下畫面，請把右方的 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>

步驟三

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

CSS Code

.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%

參考資料
特色、摘要，Feature、Summary:
關鍵字、標籤，Keyword、Tag: