# [CSS] iframe 等比例區塊

###### tags: `CSS` `iframe`

:::info
`<iframe>` 是 inline element，記得設定 `vertical-align: top` 或 `display: block`
:::

## 1. aspect-ratio
<iframe height="400" style="width: 100%;" scrolling="no" title="[iframe] 等比例區塊：aspect-ratio" src="https://codepen.io/yuna9068/embed/MWqdYWY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yuna9068/pen/MWqdYWY">
[iframe] 等比例區塊：aspect-ratio</a> by Yuna (<a href="https://codepen.io/yuna9068">@yuna9068</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 寫法一：設定父層容器尺寸，再設定 `<iframe>` 的寬高與父層相同
`.container` 為容器，`<iframe>` 為資料，先設定容器的尺寸再將資料放在裡面，讓資料依據容器改變寬高，比較不會有跑版的狀況

:::spoiler 原始碼重點
**HTML**

<div class="container">
  <iframe></iframe>
</div>

**CSS**

.container {
  width: 70%;
  aspect-ratio: 560 / 315;
}

.container iframe {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

:::

### 寫法二：直接設定 `<iframe>` 尺寸
:::warning
不推薦此寫法
:::

:::spoiler 原始碼重點
**HTML**

<iframe class="iframe-box"></iframe>

**CSS**

.iframe-box {
  width: 70%;
  height: auto;
  aspect-ratio: 560 / 315;
  vertical-align: top;
}

:::

## 2. 圖片 + absolute
<iframe height="400" style="width: 100%;" scrolling="no" title="[iframe] 等比例區塊：圖片 + absolute" src="https://codepen.io/yuna9068/embed/ExMgqLR?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yuna9068/pen/ExMgqLR">
[iframe] 等比例區塊：圖片 + absolute</a> by Yuna (<a href="https://codepen.io/yuna9068">@yuna9068</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

* 使用圖片撐開高度，圖片的寬高比為欲設定顯示的比例。
* 圖片可以加上 loading 相關文字，尚未載入 `<iframe>` 前使用者就能看到圖片上的資訊。
:::warning
缺點：未來若要變更顯示比例就必須更換圖片
:::

:::spoiler 原始碼重點
**HTML**

<div class="container">
  <img>
  <iframe></iframe>
</div>

**CSS**

.container {
  width: 70%;
  position: relative;
}

.container img {
  width: 100%;
  vertical-align: top;
}

.container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  vertical-align: top;
}

:::

## 3. padding %
<iframe height="400" style="width: 100%;" scrolling="no" title="[iframe] 等比例區塊：padding %" src="https://codepen.io/yuna9068/embed/YzgGmjb?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yuna9068/pen/YzgGmjb">
[iframe] 等比例區塊：padding %</a> by Yuna (<a href="https://codepen.io/yuna9068">@yuna9068</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

* 早期傳統的寫法，由**版塊訂出寬度，影片容器撐出高度**
* padding 使用百分比為單位時，是以父層的空間寬度(content-box)作為 100%，影片容器的寬高都是依據父層寬計算，故可以達到等比例縮放效果

### 寫法一：影片容器使用 padding-bottom 撐出高度，裡面再放 `<iframe>`

:::spoiler 原始碼重點
**HTML**

<!-- 版塊訂出寬度 -->
<div class="container">
  <!-- 影片容器撐出高度 -->
  <div class="frame-box">
    <!-- iframe 在這 -->
    <iframe></iframe>
  </div>
</div>

**CSS**

.container {
  width: 70%;
}

.frame-box {
  width: 100%;
  padding-bottom: 56.25%; /* 315 / 560 * 100% = 56.25% */
  position: relative;
}

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

:::

### 寫法二：影片容器使用 padding-bottom 撐出高度，影片容器和 `<iframe>` 在同一層

:::spoiler 原始碼重點
**HTML**

<!-- 版塊訂出寬度 -->
<div class="container">
  <!-- 影片容器撐出高度 -->
  <div class="frame-box"></div>
  <!-- iframe 在這 -->
  <iframe></iframe>
</div>

**CSS**

.container {
  width: 70%;
  position: relative;
}

.frame-box {
  width: 100%;
  padding-bottom: 56.25%; /* 315 / 560 * 100% = 56.25% */
}

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

:::

### 寫法三：使用 ::before 取代 div，由版塊::before 撐出高度

:::spoiler 原始碼重點
**HTML**

<!-- 版塊訂出寬度 -->
<div class="container">
  <!-- iframe 在這 -->
  <iframe></iframe>
</div>

**CSS**

.container {
  width: 70%;
  position: relative;
}

.container::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 56.25%; /* 315 / 560 * 100% = 56.25% */
}

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

:::

---

:::info
建立日期：2023-03-30
更新日期：2024-01-12
:::