youtube動画を縦横比を保ったままレスポンシブしたかったので調べました。

こんにちは、Webデザインしてます。イケダです。

Youtubeの動画をブログやwebページへ埋め込みたいとき、PCでもスマホでもぴったり縦横比を保ったまま収めるCSSコードです。

いろいろなサイトを調べて、取り入れされてもらったのですが、この手法が一番多い様。きれいにレスポンシブ対応できるのでシェアします。

まず、完成すると下記になります。
ブラウザ幅を変更しても動画は可変して綺麗に収まります。

※動画の音楽ありです。再生される方はご注意ください。

コードは、下記になります。コピペOKです。
初心者の方も分かりやすいように、コード内に解説(コメントアウト)をたくさんつけています。ご了承ください。

htmlの内容

<!-- Youtube動画を囲うアウトライン-->
<div class="mv">

	<!-- ↓ youtubeの埋め込みコードをコピペする-->
	<iframe width="560" height="315" src="https://www.youtube.com/embed/wJD0apMS3Dg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	
</div>

cssの内容

.mv {
    position: relative; /*基準位置に設定*/
    padding-bottom: 56.25%; /*アスペクト比の高さ 詳細は下記解説にて*/
    height: 0; /*paddingにて高さ指定するので0に*/
    overflow: hidden;
}

.mv iframe {
    position: absolute; /*親要素からの絶対配置に指定*/
    top: 0;
    left: 0;
    width: 100%; /*.mv アウトラインの幅x高さにぴったり合わせる*/
    height: 100%;
}

解説

youtubeの動画を埋め込む際、出力されるhtmlコードは、

<iframe width=”560″ height=”315″ … と始まります。*2019/7/26現在

そのままだと幅 560px 高さ315px 固定の動画になります。

上記のアスペクト比は【横幅16 : 高さ 9】 →【100% : 56.25%】 だから、width: 100%; height: 56.25%; に指定できたらアスペクト比を保ったままレスポンシブできます。

なのですが、

height: 56.25%; をそのまま指定すると .mv の親要素に対しての高さになります。なので、CSSコードの height: 0; で高さを一旦0にし、代わりにpadding-bottom (padding-topでも可) でアウトラインの内側へ 56.25% のスペース(高さ)をこじ開けているという事です。

上記のコードを知った時は、こんな方法があるのか!?と驚きでした。CSSは工夫次第でいろいろな表現ができるので、個人的に大好きな言語です。

余談ですが、
楽天市場へ出店されている店舗さんの運営でも、iframeは多様されているところが多いです。上記のコードは、コンテンツの縦横比に合わせても使えるコードなので、ショップ運営をされている方などのお役に立ちますと幸いです。

それでは。最後までお読みいただきまして、ありがとうございました🙌