実装あるある。YOUTUBEの初期状態を自作の画像にしたい。

同じようなマークアップを何度かしたことがあります。youtubeのオリジナルサムネイル機能を使うとかそういう話ではなくて、iframeの上に画像を乗せてクリックしたら動画が始まるってやつを作ります。とってもシンプルなのでyoutubeのAPIを使ってとかではないですよ。

だけど正確にいうと
画像がある→クリックする→画像を消してyoutubeをHTMLに書き出す→と、同時に再生する

という流れになります。IE9でも動きました。

(() => {

    function init01() {
        const video01 = document.getElementById("video01");
        const playButton01 = document.getElementById("play_button01");
        playButton01.onclick = function () {
            video01.innerHTML = '';
        };
    }
    // window.onload = init01;


    function init02() {
        const video02 = document.getElementById("video02");
        const playButton02 = document.getElementById("play_button02");
        playButton02.onclick = function () {
            video02.innerHTML = '';
        };
    }
    //window.onload = init02;

    function init03() {
        const video03 = document.getElementById("video03");
        const playButton03 = document.getElementById("play_button03");
        playButton03.onclick = function () {
            video03.innerHTML = '';
        };
    }
    //window.onload = init02;

    window.onload = function () {
        init01();
        init02();
        init03();
    }
})();