YouTube の URL から埋め込み用の HTML を作成する方法

はじめに

本記事では、YouTube の URL を解析して動画を埋め込む HTML を生成する JavaScript の関数を解説します。

このコードは、さまざまな形式の YouTube の URL に対応しています。

実装

コードには以下の 2 つの関数が含まれています。

1. escapeHTML(str)
   特殊文字をエスケープして安全な HTML を生成するための補助関数。
2. renderYouTube(url)
   YouTube の URL を解析し、埋め込み用の HTML を生成するメインの関数。

1. escapeHTML(str)

この関数は、HTML で使われる特殊文字（&, <, >）をエスケープして、HTML インジェクションなどのセキュリティリスクを回避します。

function escapeHTML(str) {
    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

2. renderYouTube(url)

この関数は、YouTube の URL を解析して動画 ID を抽出し、埋め込み用の HTML を生成します。

function renderYouTube(url) {
    let videoId = null;
    if (url.startsWith('https://www.youtube.com/watch?v=')) {
        videoId = url.split('&')[0].split('/watch?v=')[1];
    } else if (url.startsWith('https://youtu.be/')) {
        videoId = url.slice(17).split('?')[0];
    } else if (url.startsWith('https://www.youtube.com/shorts/') && url.length > 32) {
        videoId = url.slice(31).split('?')[0];
    } else if (url.startsWith('https://m.youtube.com/shorts/') && url.length > 31) {
        videoId = url.slice(29).split('?')[0];
    }
    if (videoId && videoId.length < 15) {
        return `<div style="width: 100%; height: 100%; aspect-ratio: 560 / 315;"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/${escapeHTML(videoId)}" frameborder="0" allowfullscreen></iframe></div>`;
    }
    return '';
}

処理の流れ

1. 動画 ID の抽出:
   URL の形式に応じて、videoId を抽出します。

   • 通常の再生ページ:
     例: https://www.youtube.com/watch?v=jNQXAC9IVRw
     → videoId = "jNQXAC9IVRw"
   • 短縮 URL:
     例: https://youtu.be/jNQXAC9IVRw
     → videoId = "jNQXAC9IVRw"
   • ショート動画（通常版）:
     例: https://www.youtube.com/shorts/jNQXAC9IVRw
     → videoId = "jNQXAC9IVRw"
   • ショート動画（モバイル版）:
     例: https://m.youtube.com/shorts/jNQXAC9IVRw
     → videoId = "jNQXAC9IVRw"

2. エラーチェック:
   動画 ID が 15 文字未満の場合のみ埋め込み HTML を生成します（YouTube の ID の長さに基づくルール）。

3. 埋め込み HTML の生成:
   iframe タグを使って安全に動画を埋め込む HTML を生成します。

   • aspect-ratio: 16:9 の比率で動画を表示。
   • max-width: デザインのために最大幅を制限。
   • escapeHTML(videoId): 動画 ID をエスケープ。

4. 結果を返却:
   有効な videoId がない場合、空文字列を返します。

使用例:

console.log(renderYouTube("https://www.youtube.com/watch?v=jNQXAC9IVRw"));
// 出力: <div style="width: 100%; height: 100%; aspect-ratio: 560 / 315;"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allowfullscreen></iframe></div>