【初学者向け】レスポンシブ対応でYouTube動画を埋め込む

初めてYouTube動画を埋め込んだとき、レスポンシブ対応に意外と苦戦したという駆け出しエンジニアの方も多いのではないでしょうか？

今回は、「なぜそうなるのか」を考えながら画面幅の60%の幅になるようにYouTube動画の埋め込みをやってみたいと思います。

ひとまずYouTubeの画面の「共有」>「埋め込む」からコピペしたコードをそのまま貼り付けてみましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/M_KXnQsotbQ?start=10" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

iframeに元々記述されているwidth属性とheight属性に従い560px × 315pxの固定の大きさで表示されます。

レスポンシブ対応するためには、widthとheightを%にするという方向性で考えれば良いのですが、iframeに対してwidthやheightを指定してもアスペクト比（縦横比）を保つことができません。

%は親要素が基準になるからです。

そこで親要素を用意し、親要素にアスペクト比を維持させ、iframe要素はwidthとheightを100%にすれば良さそうです。

以下のようにします。

<div class="movie">
 <iframe class="movie__iframe" width="560" height="315" src="https://www.youtube.com/embed/M_KXnQsotbQ?start=10"   frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</div>

.movie {
     position: relative;
     padding-bottom: calc(315 / 560 * 100%);
     // padding-topでも可
}
.movie__iframe {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
}

（iframeのwidth属性とheight属性はcssで上書き可能）

paddingを用いてアスペクト比を維持したボックスを作り、positionを用いてiframeをボックス内にピタッと収めているイメージです。

●ポイント
paddingに%を用いた場合、縦方向（padding-bottom、padding-top）であったとしても、その基準は親要素のwidthになる。

無事に画面幅100%の可変にすることができました。

次に、画面幅の60%で左右中央になるようにしたいと思います。このとき、.movieに対して以下のようにwidthを設定してしまうとうまくいきません。

<div class="movie">
	<iframe class="movie__iframe" width="560" height="315" src="https://www.youtube.com/embed/M_KXnQsotbQ?start=10"
	frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen></iframe>
</div>

.movie {
     position: relative;
     padding-bottom: calc(315 / 560 * 100%);
     width: 60%;  //追加
     margin: 0 auto;  //追加
}
.movie__iframe {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
}

どうやら幅は60%になっているものの、高さが変わっていないようです。

これは前述の通りpadding-bottomが親要素を基準としているためです。今回の場合、画面幅を基準になっているので、このpadding-bottomの指定が幅60%を基準とするようにすれば良さそうです。

ということでdivをもう一つ作り、その要素に幅60%を指定します。

<div class="movie">
	<div class="movie__inner">
		<iframe class="movie__iframe" width="560" height="315"
		src="https://www.youtube.com/embed/M_KXnQsotbQ?start=10" frameborder="0"
		allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
		allowfullscreen></iframe>
	</div>
</div>

.movie {
     width: 60%;
     margin: 0 auto;
}
.movie__inner {
     position: relative;
     padding-bottom: calc(315 / 560 * 100%);
}
.movie__iframe {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
}

無事に画面の60%でレスポンシブ対応することができました。

一見簡単そうに見えますが、「paddingやmarginに%を指定した場合、その基準は親要素のwidthになる」というcssの基礎が抜け落ちていたら苦戦してしまう例でした。

まだやったことない方は試してみてください。