【Web Frontend】限制 iframe 的尺寸上限又能夠有 RWD

作為一個非常不專業的前端初學者，有陣子常常卡在公司官網，要插入 Youtube 影片無法RWD(響應式)的問題。

跟不熟悉 網頁技術的朋友們介紹，RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排，在這個人手一機的時代，特別重要。

我們的網站廠商的系統，預設有提供一個 影片RWD樣式，但是影片就是直接滿版，主管不太滿意，今天上班的時候總算靠著 GPT 教我正確的修改完了~~~~

大家可以在這篇文章，縮放一下視窗大小試試看，

Youtube 的框框會跟著瀏覽器縮放歐~~~~

順手測試下 Vocus 的響應式設計，恩 非常的順暢(以為每個人都跟自己一樣菜)

順便測試一下 方格子的 RWD ㄏㄏ

HTML

由於我們的系統樣式文件，不太能自己動，所以我就直接把樣式寫在 HTML 裡面了，請見諒。

修改前，已經上網找了人家的範例，自己拼拼湊湊，結果一直試不出想要的效果......

<div style="width: 100%; max-width: 600px; margin: 0 auto; position: relative;">
  <div
    style="position: relative; padding-bottom: 56.25%; margin: 0 auto; height: 0; width: 100%;"
  >
    <iframe
      src="https://www.youtube.com/embed/_U7uwcWna0g"
      width="100%"
      height="100%"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
  </div>
</div>

修改後，甚至還請 GPT-4o 教教我到底哪裡寫錯了..........

<div style="width: 100%; max-width: 600px; margin: 0 auto; position: relative;">
  <div
    style="position: relative; padding-bottom: 56.25%; height: 0; width: 100%;"
  >
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src="https://www.youtube.com/embed/6qKtmDrhaww?rel=1&amp;si=oDaqA84fvnI1YwBh"
      width="100%"
      height="100%"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
  </div>
</div>

由於我希望影片最大寬度 600px，所以就設定第一層的 div max-width 為600px。

有不少關鍵概念，把div 的height 設定為0，這樣就能用 padding-bottom來設定高度，並且使 高度依照寬度自動成比例。56.25% = 16/9 的比例。(padding-bottom 和 max-width 放同一層無法生效，所以才放第二層)

最後是我自己忽略(沒學好)的部分，position: abolute，才會使 iframe 占滿外層的容器。

僅此紀錄一個菜機試錯了好久才得出的答案。