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 的大小比例做伸縮。...