開発 2024.07.11

YouTube動画をスマホでも最適表示！レスポンシブ埋め込みの方法

ウェブサイトやブログにYouTube動画を埋め込むことは、コンテンツの魅力を高めるための効果的な手段です。しかし、デフォルトの埋め込みコードでは、動画がレスポンシブに対応していないことが多く、モバイルデバイスや異なる画面サイズでの表示が崩れてしまうことがあります。この記事では、YouTube動画をレスポンシブに埋め込む方法について詳しく解説します。

1 レスポンシブデザインとは？
2 YouTube埋め込みの基本
3 レスポンシブデザインを適用させる
4 まとめ

レスポンシブデザインとは？

レスポンシブデザインとは、デバイスの画面サイズに応じてウェブページのレイアウトを自動的に調整するデザイン手法です。これにより、デスクトップ、タブレット、スマートフォンなど、あらゆるデバイスで最適な表示が可能になります。

YouTube埋め込みの基本

YouTubeから動画を埋め込む基本的な手順は以下の通りです：

YouTubeで埋め込みたい動画を開く。
動画の下にある「共有」ボタンをクリック。
「埋め込む」オプションを選択。
表示される埋め込みコードをコピーし、ウェブサイトのHTMLに貼り付ける。

この方法で埋め込まれた動画は固定の幅と高さを持っており、画面サイズが変更されてもサイズが変わりません。これをレスポンシブにするためには、CSSを使用してスタイルを調整する必要があります。

レスポンシブデザインを適用させる

HTMLの準備

YouTube埋め込み用の<iframe>タグをHTMLに貼り付け、videoというクラス名がついた<div>タグで囲います。

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/（ここには動画のコードが入ります）" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

CSSの準備

次に、以下のCSSを追加します。

.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}

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

なぜこれでレスポンシブ対応になるのか？

この方法を使うとYouTube動画がレスポンシブ対応になる理由を以下に説明します：

コンテナの相対的な高さ設定
padding-top: 56.25%; は、16:9のアスペクト比を維持するための一工夫です。
この値は、動画の高さをコンテナの幅に対する割合として設定します。これにより、幅が変わっても高さが適切に変わるようになります。これにより、コンテナの幅が変わると高さも自動的に変わり、アスペクト比を保ちながら動画のサイズが調整されるようになります。
絶対配置による位置固定
iframeに対してposition: absolute;を設定することで、コンテナの内部に対して絶対的に位置を固定します。
絶対配置した埋め込み動画へのサイズ指定
position: absolute; にした .video-container iframe にwidth: 100%; height: 100%; を使うことで、コンテナ内のiframeが完全にフィットするようになります。これで、比率を保ったまま動画のサイズが自動的に調整されるようになります。