一瞬でiframeを比率を保ってレスポンシブさせる方法【YouTube動画埋め込み】

MW WP Form(WordPress)でデイトピッカーが動かないときの対処法

2022.01.17

WordPressの自動更新を止める方法を紹介

2022.01.19

VScode 便利なショートカット 文末を選択

2022.01.19

YouTube動画をiframeで埋め込む際、埋め込みコードには幅が記述されていて、固定されてレイアウトが崩れてしまいがちです。

そんなとき、動画の比率を保ちながらレスポンシブさせる方法です。

これからご紹介するコード一発で実装が完了します。

iframeをレスポンシブ対応させるコード

<div class="iframe-wrapper">
<iframe src="〜〜"></iframe>
</div>

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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

iframeタグをdivなどで一つ囲むのがポイントです。

max幅を指定したいときはその外側をさらに囲ってそこに幅の指定をあてましょう。

aspect-ratioなども出ていますが、iPhoneで崩れてしまったり、比率を維持する系はこの方法が安定しています。

メモに入れて一瞬で実装できるようにしておきましょう。