ブログ/お知らせ Knowledge

実装あるある・YOUTUBEのサムネイルをオリジナル画像にしたい。

コーディング

2017.03.07

同じようなマークアップを何度かしたことがあります。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();
    }
})();