YouTube Player APIを使ってYouTubeの動画をWebページへ埋め込んで制御する

2024年 3月14日　Posted　野々瀨(フロントエンドエンジニア)

YouTubeは動画を気軽で簡単にWebページへ埋め込むことができます。そのうちの一つとしてiframeで埋め込むことができます。 YouTubeではこのiframeで埋め込んだ動画を、自由なタイミングで読み込んだり、再生や停止などの操作を行えたりするAPIを提供しています。今回はそんなYouTubeのiframeの動画を、APIを使って制御する方法をご紹介します。

IFrame Player APIとは

YouTubeが提供しているIFrame Player APIというAPIがあります。このAPIは、YouTubeの動画をWebページへ埋め込むための方法の一つであるiframeを、任意のタイミングで読み込めるほか、再生や停止といった制御を自由に行うことができます。

また、この記事を書いている時点では、無料でかつGoogleアカウントを必要とせず、気軽に利用することができます。

使ってみる

まず、表示したい箇所にid属性を付与した空の要素（HTML）を用意します。

<div id="sample"></div>

続いて次のJavaScriptコードを記述します。

function onYouTubeIframeAPIReady() {
    const player = new YT.Player('sample', {
        videoId : 'IqKz0SfHaqI',
        width   : 480,
        height  : 270
    });
}

window.addEventListener('DOMContentLoaded', () => {
    const headElem   = document.getElementsByTagName('head')[0];
    const scriptElem = document.createElement('script');

    scriptElem.src = 'https://www.youtube.com/iframe_api';

    headElem.appendChild(scriptElem);
});

このJavaScriptは何をしているかといいますと、まず10行目から15行目まででIFrame Player APIのスクリプトを読み込むようにしています。

1行目でonYouTubeIframeAPIReady関数を用意していて、IFrame Player APIのスクリプトが読み込まれますと、自動的にこの関数を実行します。注意点としてonYouTubeIframeAPIReady関数はアロー関数で定義することはできず、またグローバルで定義する必要があります。

2行目～6行目でYT.Playerクラスを使用して動画プレーヤーを生成しています。YT.Playerクラスの第一引数には先ほど用意したHTMLのid属性値を指定し、第二引数に詳細な設定を指定します。第二引数については次のとおりです。

イベント

eventsプロパティでは、APIの何かしらのきっかけで発動するイベントを受け取ることができます。発動するイベントは次のとおりです。

const player = new YT.Player('sample', {
    videoId : 'IqKz0SfHaqI',
    width   : 480,
    height  : 270,
    event   : {
        onReady : event => {
            event.target.setVolume(50);
        }
    }
});

プレーヤーの初期設定

playerVarsプロパティでは、動画プレーヤーの初期設定を行うことができます。設定可能な内容は次のとおりです。

次のコードは、複数の動画を再生リストにし、コントローラーを非表示にしている例です。

const player = new YT.Player('sample', {
    videoId    : 'IqKz0SfHaqI',
    width      : 480,
    height     : 270,
    playerVars : {
        playlist : 'IqKz0SfHaqI,7ePhUVJQs00'
        controls : 0
    }
});

playerVarsプロパティの詳細は、公式ドキュメントの「サポートされるパラメータ」をご覧ください。

メソッド

YT.Playerクラスで生成されたインスタンスは、次のメソッドを使用することができます。

次のコードは、.change-volumeというbutton要素を押した時に、音量を50%に設定する例です。

const player = new YT.Player('sample', {
    videoId : 'IqKz0SfHaqI',
    width   : 480,
    height  : 270
});

document.querySelector('.change-volume').addEventListener('click', () => {
    player.setVolume(50);
});

メソッドの詳細は、公式ドキュメントの「再生の制御とプレーヤーの設定」をご覧ください。

自動再生

ページ読み込み時に動画を自動再生するには、playerVarsプロパティのautoplayプロパティを1に設定します。

const player = new YT.Player('sample', {
    videoId    : 'IqKz0SfHaqI',
    width      : 480,
    height     : 270,
    playerVars : {
        autoplay : 1
    }
});

しかし、この設定を行っても自動的に再生されません。これはYouTubeのiframeでは内部的にvideo要素を使用していますが、仕様で消音状態にしていないと自動再生を有効にすることができないようになっています。

というわけで、playerVarsプロパティのmuteプロパティも1に設定します。

const player = new YT.Player('sample', {
    videoId    : 'IqKz0SfHaqI',
    width      : 480,
    height     : 270,
    playerVars : {
        autoplay : 1,
        mute     : 1
    }
});