どのように作成するか：応答式 Iframe

CSSを使用して応答式iframeを作成する方法を学びます。

応答式 iframe

幅高比（4:3、16:9など）を保つiframeを作成します：

幅高比とは何ですか？

要素の幅高比は、その幅と高さの間の比率関係を説明しています。一般的なビデオの幅高比の2つは、4:3（20世紀の一般的なビデオフォーマット）と16:9（ハイビジョンテレビやヨーロッパのデジタルテレビおよびYouTubeビデオの一般的なフォーマット）です。

How To - 响応式 Iframes

第1ステップ - HTMLを追加：

コンテナ要素、例えば<div>を使用し、iframeを追加します：

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

第2ステップ - CSSを追加：

に padding-top パーセンテージを追加して、コンテナDIVの幅高比を維持します。以下の例では、16:9の幅高比のコンテナを作成します。これはYouTubeビデオのデフォルトの幅高比です。

インスタンス - 16:9 幅高比

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 幅高比（9 除して 16 等しい 0.5625） */
}
/* その後、iframeのスタイルを設定して、コンテナdivに完全な高さと幅に適応させる */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

自分で試してみる

他の幅高比

インスタンス - 4:3 幅高比

.container {
  padding-top: 75%; /* 4:3 幅高比 */
}

自分で試してみる

インスタンス - 3:2 幅高比

.container {
  padding-top: 66.66%; /* 3:2 幅高比 */
}

自分で試してみる

インスタンス - 8:5 幅高比

.container {
  padding-top: 62.5%; /* 8:5 幅高比 */
}

自分で試してみる

インスタンス - 1:1 幅高比（幅と高さが常に等しい）

.container {
  padding-top: 100%; /* 1:1 宽高比 */
}

自分で試してみる