YouTube埋め込みの最適解は？Webデザイナーが知っておくべき「埋め込み方法のベストプラクティス」と「縦型動画（ショート動画）」の導入の技術的ポイント

こんにちは、みみほくろです。

Youtubeって面白い動画が多くて時間を忘れちゃいますよね。

自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。

ですが、YouTube動画を埋め込む際、単にコードを貼り付けるだけでなく、「ページの表示速度（Lighthouseスコア）」や、近年主流となっている「YouTubeショート（縦長動画）」への対応は、UX（ユーザー体験）に直結する重要な要素なため、適材適所を見極める必要があります。

今回は、主要な3つの実装方法について、それぞれのメリット・デメリットを詳しく解説します。

紹介する実装方法はこの3つです。

Youtube発行のIframeをそのまま貼り付け
DOM操作による埋め込み
Youtube Player API

それでは一つ一つ見ていきましょう！

標準的な埋め込み：「公式Iframe」
1. メリット：圧倒的な導入スピードと安定性
2. デメリット：ページパフォーマンスへの悪影響
パフォーマンス重視：「DOM操作」による遅延読み込み
1. メリット：初期表示速度の劇的な改善
2. デメリット：ユーザーの手間の増加
3. 高度な制御：「YouTube Player API」
挙動を制御する「プレーヤーパラメータ」の活用
【重要】通常動画とショート動画のレスポンシブ戦略
1. 1. 埋め込み用URLへの変換
2. 2. デバイスごとの最適なアスペクト比
まとめ：要件に合わせた手法の選択

標準的な埋め込み：「公式Iframe」

YouTubeの共有機能から取得した埋め込みコードをそのままHTMLに配置する、手っ取り早くてスタンダードなやり方です。

赤枠の「共有」ボタンから発行されます。（画像はYoutube公式サイトで使われているYoutube動画のキャプチャ）

メリット：圧倒的な導入スピードと安定性

実装が容易: HTMLを1行貼り付けるだけで完了し、プログラミングの知識がなくても対応可能です。
メンテナンス性: YouTube側の仕様変更があっても、公式が提供するコードであるため壊れにくく、保守が容易です。

デメリット：ページパフォーマンスへの悪影響

レンダリングブロック: ブラウザはIframe内のリソースを読み込むためにメインスレッドを占有し、ページの初期表示を遅延させます。
Lighthouseスコアの低下: 動画が重い場合、LCP（最大視覚コンテンツの表示時間）などのスコアに悪影響が出てしまい、SEO面でのマイナス要因になり得ます。

パフォーマンス重視：「DOM操作」による遅延読み込み

ユーザーが「再生ボタン」を押すまで動画を読み込まない、あるいはCSSや画像などページ全体の読み込みが完了した後にIframeを生成してHTMLに追加する手法です。

メリット：初期表示速度の劇的な改善

リクエストの削減: ページロード時にYouTube関連の重いスクリプトや画像（サムネイル以外）を読み込まないため、Lighthouseスコアを高く維持できます。
ユーザーファースト: 「動画を見たい」という明確な意思表示（クリック）があって初めて通信が発生するため、モバイルユーザーのデータ通信量節約にも貢献します。

デメリット：ユーザーの手間の増加

2ステップの操作: 「動画読み込みボタンを押す」→「動画の再生ボタンを押す」という2段階の操作が必要になる場合があり、直感的なUXを損なうリスクがあります。
JavaScript依存: スクリプトがオフの環境では動画が全く表示されないため、フォールバックの検討が必要です。

実装例：

<button id="createYoutubeButton">動画を読み込む</button>
<div class="youtube-container"></div>

<script>
const youtubeContainer = document.querySelector(".youtube-container");
const createYoutubeButton = document.querySelector("#createYoutubeButton");

createYoutubeButton.addEventListener("click", () => {
    youtubeContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allowfullscreen></iframe>`;
});
</script>

読み込んでいるYoutube動画は公式で紹介しているものを使っています。

3. 高度な制御：「YouTube Player API」

JavaScriptでプレーヤーの挙動を詳細にコントロールする、開発者向けの手法です。

メリット：リッチなUXと細かい挙動制御

細かなパラメータ管理: 再生終了時に特定の処理を走らせる、特定の時間から再生を開始する、といった柔軟な制御が可能です。
非同期読み込み: API自体が非同期で読み込まれるため、標準のIframe貼り付けよりもパフォーマンスへの影響を抑えつつ、高度な機能を提供できます。

デメリット：実装コストと複雑性

学習コスト: APIの仕様を理解する必要があり、単純な埋め込みに比べてコード量が増え、デバッグの手間も発生します。
外部スクリプトへの依存: YouTube側のAPIサーバーが万が一ダウンしたり、スクリプトの読み込みに失敗したりした場合、プレーヤーが正しく初期化されないリスクがあります。

実装手順の詳細

YouTube Player APIを導入するための具体的なステップは以下の通りです。

① APIスクリプトの非同期読み込み

まず、APIの本体となるJavaScriptファイルを動的に読み込んでDOM上に組み込みます。

// APIのスクリプトタグを生成
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

// 最初のscriptタグの前に挿入
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

② プレーヤーの初期化

APIの読み込みが完了すると、グローバル関数 onYouTubeIframeAPIReady が自動的に実行されます。この中でプレーヤーのインスタンスを生成します。

let player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', { // HTML側のIDを指定
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            'playsinline': 1, // iOSでインライン再生を許可
            'rel': 0          // 関連動画を自身のチャンネルに限定
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

playerVarsでは動画の状態を設定する「パラメータ」を指定することができます。よくあるパラメータは後述していますので、そちらを参考にするか、Youtube Player APIの公式ページをご覧ください。

YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers

アプリに YouTube プレーヤーを埋め込みます。

③ イベントによる制御

動画の準備が整ったときや、再生状態が変わったとき（再生・停止・終了）に独自の処理を挟むことができます。

// プレーヤーの準備が整ったとき
function onPlayerReady(event) {
    // 例：準備ができたら自動でミュートにして再生
    event.target.mute();
    event.target.playVideo();
}

// 状態が変化したとき
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        console.log("動画の再生が終了しました。");
        // 次の動画へ遷移させる、などの処理が可能
    }
}

挙動を制御する「プレーヤーパラメータ」の活用

Youtube動画にはURLの末尾にパラメータを付与することで、動画の挙動をカスタマイズすることができます。

よく使うパラメータ一覧

パラメータ	値	内容
`autoplay`	`1`	自動再生する。
`mute`	`1`	消音状態で再生する（自動再生には必須）。
`controls`	`0` / `1`	プレーヤーのコントロールを表示するか。
`loop`	`1`	ループ再生する（`playlist`パラメータとの併用が必要）。
`rel`	`0`	再生終了時、同じチャンネル内の関連動画のみを表示する。
`start`	`数字`	再生を開始する秒数を指定する。
`end`	`数字`	再生を終了する秒数を指定する。

具体的な使用例

① 背景動画として「ループ再生」させる

環境映像などを背景として使う場合、音声を消し、コントロールを隠してループさせます。

※loop=1を使う際は、playlistパラメータに同じ動画IDを入れる必要があります。

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0"></iframe>

② 動画の「見どころ」だけを再生する

長い動画の中で、特定の30秒間だけを見せたい場合などに有効です。

<!-- 60秒目から再生開始し、90秒目で終了する -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?start=60&end=90"></iframe>

実装時の注意点：自動再生のルール

現在のブラウザポリシーにより、autoplay=1 を指定する場合は必ず mute=1 をセットにする必要があります。音声が出る状態での自動再生は基本的にブロックされます。

【重要】通常動画とショート動画のレスポンシブ戦略

YouTubeショート（9:16）を埋め込む際は、通常の動画（16:9）とは異なる設定が必要です。

1. 埋め込み用URLへの変換

Youtubeショートには埋め込み用のコードがデフォルトでは用意されていないので、自分でカスタマイズする必要があります。

視聴用URL: https://www.youtube.com/shorts/VIDEO_ID
埋め込み用: https://www.youtube.com/embed/VIDEO_ID

といってもshortsをembedに変えるだけです笑

2. デバイスごとの最適なアスペクト比

モダンなCSSプロパティ aspect-ratio を活用します。

/* 動画共通のベース設定 */
.video-wrapper {
    position: relative;
    width: 100%;
    margin: 20px auto;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 通常動画 (16:9) */
.video-normal {
    aspect-ratio: 16 / 9;
    max-width: 800px;
}

/* ショート動画 (9:16) */
.video-shorts {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 400px;
}

/* PC向けの調整 */
@media screen and (min-width: 768px) {
    .video-shorts {
        max-width: 315px; 
    }
}

通常の動画では16：9、ショートの場合には9：16と切り替えることができます。

まとめ：要件に合わせた手法の選択

さて、ここまでYoutube動画の埋め込み方法をいくつかご紹介しましたが、下記のような使い分けがオススメです。

スピード最優先のスポット案件 → 公式Iframe
Lighthouseスコアを改善したいサイト → DOM操作による後読み
複雑なインタラクションが必要なキャンペーン → YouTube Player API
ショート動画 → URL変換とデバイスごとのサイズ管理を徹底する

ちなみにYoutube Player APIには40以上の関数と6つのイベントに20ほどのプロパティーが用意されているので、より細かい調整を行いたい場合にうってつけです。

なので、オススメとしてはYoutube Player APIですが、現場の要件に合わせて、ケースバイケースで使い分けてみてください。