[Youtube] playVideoを実行しても動画が再生されない（IFrame Player API）

公開日:2020/11/30 更新日:2020/12/04

ページに埋め込んだYoutube動画は、Youtubeで提供されている「IFrame Player API」で制御することができます。

できます。が、動画再生を行うためのAPI「playVideo()」がうまく動かず、ハマってしまったのでメモを残したいと思います。

NGなサンプルコード

<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/xxxxxxxxxxx?enablejsapi=1&origin=http://www.xxxx.com" frameborder="0"></iframe>
<script>
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
        const player = new YT.Player('player', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>

動画の再生準備が完了したときに発生するイベント「onReady」で関数「onPlayerReady」を実行し、その中で「playVideo()」を実行しています。

一見動いてくれてもよさそうですが、これでは動画が再生されません。

修正版サンプルコード

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

「onPlayerReady」で「playVideo()」を実行する前に「mute()」を実行して、動画の音を消しています。

こうすることで動画が再生されるようになりました。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。