Blog スタッフブログ

2022.09.30

JavaScript WEB制作

Youtubeの埋め込みで独自サムネイルを設定する

WEB制作担当の木戸です。

Youtube APIを利用して好きなサムネイルを設定し、再生ボタンをクリックしてからYoutubeを読み込む方法をご紹介します。

Youtubeの[共有]からiframeで埋め込む場合、自動生成されたサムネイルかYoutube側で設定されたサムネイルしか表示できないため柔軟に対応することができません。

そこでYoutube APIを利用して、Webサイト側で設定したaタグをクリックするとiframeに変換されて再生されるようにします。

jQueryを使用するのであらかじめ読みこんでおきます。

設定方法

手順.1 独自サムネイルの表示

<a href="javascript:void(0);" id="youtube_id01" data-mvnum="1">
    <img src="thumbnail.jpg" alt="サムネイル">
</a>

aタグに任意のidを設定しておきます。

手順.2 Youtube APIの読み込みと設定

var ytData = [
        {
            id: "movie01",
            movie: "AAAAAAAAA"
        }
    ];
    var ytPlayer = [],
        ytPlaying,
        ytStop,
        ytPlay;
    var tag = document.createElement("script");

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
        ytPlayer[thisIndex] = new YT.Player(ytData[thisIndex]["id"], {
            controls: 0,
            disablekb: 0,
            iv_load_policy: 3,
            modestbranding: 1,
            rel: 0,
            showinfo: 0,
            videoId: ytData[thisIndex]["movie"],
            playerVars: {
                autoplay: 1,
                playsinline: 1
            },
            events: {
                onReady: onPlayerReady
            }
        });
    }
    function onPlayerReady(a) {
        a.target.mute();
        a.target.playVideo()
    }

まず、var ytData = [];の中のidにaタグで設定したid（youtube_id01）に設定します。

次にmovieに埋め込みたい動画の最後のURL部分を設定します。

https://www.youtube.com/watch?v=AAAAAAAAA であれば、watch?v= 以降の AAAAAAAAA の部分。

手順.3 クリックで再生する処理

$("#youtube_id01").on("click", function () {
    var b = $(this),
        a = b.attr("id");
    thisIndex = b.attr("data-mvnum") - 1;
    onYouTubeIframeAPIReady()
});

最後にid=”youtube_id01″ のaタグをクリックしたらさいせいされる処理を追加して完了です。

次の記事へ

一覧へ戻る

前の記事へ