標籤: aspect-ratio

基本上, iframe 的 RWD 方法有很多種, 不過都需要在外層有個 div 來包裝出比例的尺寸, 才能達成 RWD化, 可以參考:

• https://blog.theodo.com/2018/01/responsive-iframes-css-trick/
• https://www.benmarshall.me/responsive-iframes/

若只有 iframe tag 本身的話, 不在外層加裝 div 時, 如何達成呢? 可以利用這個 css 屬性: aspect-ratio

以 Youtube 的 embed code 為例:

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

我們將 iframe 設定以下屬性:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

即可順利在不外加 div tag 的條件下, 將 iframe 本身保持指定比例(如 16:9)的 RWD化.

來看看範例吧:

https://codepen.io/timhuang/pen/BaYdMmN

至於這個 CSS 屬性 aspect-ratio 的支援性如何呢? 可以看一下 can i use 網站的資料囉:

https://caniuse.com/mdn-css_properties_aspect-ratio

看起來除了 IE 外, 其他主流瀏覽器都有支援呢.