WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

近年動画コンテンツをWebサイト内に入れて見せる方法は主流になってきました。動画ファイル（mp4やWAV）をそのままサーバ内にアップロードして、Webサイト内で埋め込みをする方法もありますが、それだと動画ファイルの容量が大きいときにサーバ内を圧迫してしまうという難点もあります。
最近ではYouTube内にて自分たちのチャンネルを開設し、動画をアップロードした上でWebサイトに動画を埋め込むといった方法もよく使用されるようになりました。
しかし、YouTubeにて生成される埋め込みコードはレスポンシブに対応していないため、スマートフォンから見たときに崩れてしまうといった弊害があります。
そういったときに使える、レスポンシブにも対応したCSSの記述方法を紹介します。

YouTubeの埋め込みコードを取得しよう

まずはじめに、Webサイトに挿入したい動画の埋め込みコードを取得しましょう。
（チャンネルを開設した上で、動画のアップロードが完了している後からの説明になります）

再生される動画のページへ行き、「共有」と書かれているリンクをクリックします。

上記のモーダル画面が表示され、この動画を別のサイトやSNSへ共有するための各種方法が出てきます。htmlの埋め込みコードの取得は、一番左にある「埋め込む」のボタンをクリックしましょう。

埋め込み用のiframeタグが表示されました。赤枠で囲った部分のコードをコピーしたら、自分が制作しているサイト内のファイルにペーストをして準備は完了です。

埋め込みコードをレスポンシブ化していこう

さきほどコピー＆ペーストした埋め込みをコードをまずはdivタグで囲い、クラス名を付けていきましょう。動画なのでクラス名は「movie_area」にしました。

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

CSSは下記になります。

.movie_area {
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の縦幅*/
  height: 0;
  overflow: hidden;
}

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

これで、ウィンドウ幅が可変しても崩れることなくレスポンシブに幅に対応した動画エリアができました！
ですがこのままだと動画エリアが100%で広すぎるので、iframeタグを囲ったdivタグへさらに親タグを入れてあげた上で横幅を決めてあげましょう。
最終的に出来上がったのがこちらになります。

See the Pen
youtube動画埋め込みレスポンシブ版 by saki kurita (@saki_0415)
on CodePen.

まとめ

動画を挿入する際は、レスポンシブの見た目の崩れに注意してWebサイトにいれましょう！