iframe要素を用いたYoutube動画の埋め込み #JavaScript

はじめに

HTML、CSS、JavaScriptを勉強していく過程で、webページにYoutube動画を読み込み・再生させる方法はないのかと思い、ネットで調べていました。今回はその方法について記載いたします。

もしご興味のある方は、ぜひご覧ください。

iframe要素について

HTML文書の中に別のHTML文書を埋め込むために使用されるHTMLの要素です。
"Inline Frame" の略で、「インラインフレーム」「アイフレーム」と呼ばれます。
メインのwebページの中に別のwebページを「フレーム」として埋め込むことができます。
iframe内は外部のソース（例：GoogleマップやYouTube動画）から来るため、
メインのwebページとは独立して表示されます。

まとめると、
iframeは、メインのwebページに別のwebページの文章、画像、動画など、さまざまなコンテンツを埋め込むための便利な機能ということです。

iframeの使い方

①HTMLタグ(<iframe> )として使用

<iframe> タグを使用して、webページにiframeを追加します。
webリンク(例：https://www.example.com)を<iframe> タグで囲みsrc属性の中に記載することで、現在のwebページに埋め込むことができます。

使用例:
<iframe src="https://www.example.com"></iframe>

②属性の設定
src（ソースURL）、width（幅）、height（高さ）など、iframeにはいくつかの属性を設定できます。これらは、iframeがどのページを表示し、どれくらいのサイズで表示されるかを制御するために使用されます。

③セキュリティとパフォーマンス
iframeを使用する際は、セキュリティやページのパフォーマンスに影響を与える可能性があるため、使用する外部コンテンツのソースに注意する必要があります。

それでは

HTMLを使ったiframe要素の追加

YouTube動画の静的読み込み

サンプルコード(HTML)

<!DOCTYPE html>
<html>
<head>
    <title>YouTube動画</title>
</head>
<body>
    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</body>
</html>

手順

1.HTMLドキュメントの基本構造を作成

<!DOCTYPE html>
<html>
<head>
    <title>YouTube動画</title>
</head>
<body>
</body>
</html>

2.YouTube動画のリンクを取得

YouTubeにアクセス：ブラウザでYouTubeを開き、埋め込みたい動画を検索します。
埋め込みコードを取得：動画の下にある「共有」ボタンをクリックし、「埋め込み」を選択します。表示されたコード（iframeタグ）から、src 属性のURL部分をコピーします。

3.HTMLドキュメントに埋め込みコードを追加

<iframe> タグの追加: <body> セクション内に <iframe> タグを配置します。

<body>
    <iframe src= "" >
    </iframe>
</body>

4.YouTubeリンクの貼り付け

先ほどコピーしたYouTube動画のURLをを src 属性の値として <iframe> タグに貼り付けます。

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID"
        frameborder="0"
        allowfullscreen>
    </iframe>

属性の調整：必要に応じて width（幅）と height（高さ）を調整します。frameborder="0" は境界線を非表示にし、allowfullscreen はフルスクリーン表示を許可します。

JavaScriptを使ったインタラクティブな要素の追加

YouTube動画の動的読み込み

サンプルコード(HTML・JavaScript)

<!DOCTYPE html>
<html>
<head>
    <title>YouTube動画</title>
</head>
<body>
    <button onclick="loadVideo('YOUTUBE_VIDEO_ID_1')">動画1</button>
    <button onclick="loadVideo('YOUTUBE_VIDEO_ID_2')">動画2</button>

    <div id="videoContainer"></div>

    <script>
        function loadVideo(videoId) {
            const iframeHtml = `
                <iframe
                    width="560"
                    height="315"
                    src="https://www.youtube.com/embed/${videoId}"
                    frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>`;
            
            document.getElementById('videoContainer').innerHTML = iframeHtml;
        }
    </script>
</body>
</html>

手順

1.HTMLドキュメントの基本構造を作成：　先ほどと同じ内容

2.ボタンの追加と動画読み込み関数の定義

動画を読み込むためのボタンを追加します。
各ボタンは onclick イベントを使用して、異なるYouTube動画IDを loadVideo 関数に渡します。
videoContainer というIDを持つdiv要素は、動画が読み込まれる場所として使用されます。

補足
YouTube動画IDは、YouTube上の各動画を一意に識別するための文字列です。
通常、YouTube動画のURLは https://www.youtube.com/watch?v=動画ID の形式で構成されています。ここで、watch?v= の後に続く11文字が動画IDです。
例: https://www.youtube.com/watch?v=dQw4w9WgXcQ の場合、動画IDは dQw4w9WgXcQ です。

＊動画の下の「共有」ボタンから「埋め込み」を選択すると表示されるHTMLコード(iframeタグ）内の src 属性にも、動画IDが含まれています

<body>
    <!--YOUTUBE_VIDEO_ID_1および2に埋め込みたいYoutube動画IDを入れる-->
    <button onclick="loadVideo('YOUTUBE_VIDEO_ID_1')">動画1</button>
    <button onclick="loadVideo('YOUTUBE_VIDEO_ID_2')">動画2</button>

    <div id="videoContainer"></div>
</body>

3.動画の読み込み

JavaScript関数 loadVideo は、引数として与えられたYouTube動画IDに基づいて、新しいiframeを生成し、そのiframeを videoContainer に埋め込んでいます。
ユーザーがボタンをクリックすると、loadVideo 関数が実行され、指定された動画が videoContainer に読み込まれます。

<script>
    function loadVideo(videoId) {
        var iframeHtml = `
            <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/${videoId}"
                frameborder="0"
                allowfullscreen>
            </iframe>`;
        document.getElementById('videoContainer').innerHTML = iframeHtml;
    }
</script>

まとめ

この記事では、HTMLタグ(iframe)を使用したYouTube動画の埋め込み方法と、JavaScriptを用いてページをよりインタラクティブにする方法を学びました。JavaScriptを使うことで、ユーザーの操作に基づいて動的にコンテンツを変更することができ、ウェブページをより魅力的なものにしてくれます。皆さんもぜひ試してみてください。

iframe要素を用いたYoutube動画の埋め込み