點燈坊

失くすものさえない今が強くなるチャンスよ

如何建立自動 RWD 的 iframe ?

Sam Xiao's Avatar 2021-01-28

如 Youtube 本質上就是 <iframe>，但若要能讓 Youtube 也 RWD，則必須搭配一些 CSS 技巧。

Version

CSS 3

iframe

iframe000

Canvas 可隨著 browser 寬高改變而自動改變。

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

<style scoped>
.box {
  width: 90%;
  position: relative;
}

.box::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}

.box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>

第 2 行

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

當使用 Youtube 的 share embed 時，它會給你一段 <iframe>，且 width 固定為 560，height 為 315。

為了使 Youtube 能 RWD，我們在 <iframe> 外包一個 <div>，將以此 .box 控制 。

13 行

.box::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}

使用 ::before 建立一個虛擬的 <div>

  • content: ''：沒有任何內容故為 empty string
  • display: block：如 <div> 為 block element
  • width: 100%：width 由 parent 的 width 決定，100% 表示跟 parent 的 width 相等
  • padding-bottom: 56.25%：在此 padding-bottom 相當於 height， 由於其亦由 parent 的 width 決定，目前 width 已經 100% 跟 parent 相等，padding-bottom 只要計算出 height/width 的百分比即可，也就是 315/560*100% = 56.25%

20 行

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

之前已經使用 ::before 建立出虛擬 <div> 建立空間，只要使用絕對定位將圖片覆蓋在虛擬 <div> 上即可。

  • width: 100%：取代原本 width 的 640，改與 parent width 100% 相等
  • height: 100%：取代原本 height 的 480，改與 parent height 100% 相等

第 8 行

.box {
  width: 90%;
  position: relative;
}

由於 ::before 所建立的 <div> 與 .box canvas 都由 parent 的 width 決定，因此 .box 的 width 成為一開始顯示寬度的關鍵。

Conclusion

  • 這種方式可視為 pattern 使用，唯 padding-bottom 需根據實際的 height / width 計算，且 box 的 width 也須視需求指定
  • 由於 Youtube 固定為 width=560，height=315，因此 padding-bottom 固定為 56.25%，只剩下 .box 的 width 需設定百分比

# CSS