実装あるある・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();
    }
})();

一つのページに何個もyoutubeを埋め込むパターンで書いています。読み込みたいyoutubeのurlはみなさんの環境で適宜変えてくださいね。
これで動かなかったら最初の

(() => {

と最後の

})();

を消してみてください。

youtubeのAPIを使ったもっと難しいやつはこちらの記事が参考になります。
http://www.tam-tam.co.jp/tipsnote/javascript/post6217.html

ほなね