Blog スタッフブログ

2023.01.29

JavaScript WEB制作

Youtube Data APIを使った埋め込み

コーダーのKです。

「Youtube Data API」はYouTubeが提供しているAPIです。

今回は「Youtube Data API」と「jQuery」を使って

Webサイト上の任意のサムネイルをクリックしてYoutubeを再生する方法をご紹介します。

1.サムネイルと動画の埋め込む場所を作成

■HTML

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

表示させたい箇所に配置します。

divで囲っているのは見た目の調整用です。

■CSS

.video {
    position: relative;
    padding-top: 56.25%;
}

.video a,
.video iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video img {
    width: 100%;
}

画面幅を変えてもiframeの比率が変わらないようにしています。

■JS

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    var ytData = [
      {
        id: "XXXX",
        movie: "YYYY"
      }
    ];
    var ytPlayer = [],
        ytPlaying,
        ytStop,
        ytPlay;
    var tag = document.createElement("script");
    $(function(){
      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()
    }
    $(window).on('load', function() {
      $(".video a").on("click", function () {
        var b = $(this),
        a = b.attr("id");
        thisIndex = b.attr("data-mvnum") - 1;
        onYouTubeIframeAPIReady()
      })
    });
</script>

jQueryを事前に読み込みます。

XXXXの部分をaタグに設定したidを設定します。

YYYYの部分にYoutubeのURLから?v=の後ろの文字を設定します。

例：youtube.com/watch?v=abcdef

aタグをクリックするとaタグがiframeに置き換わり動画が再生されます。

次の記事へ