YouTube Player APIを利用して埋め込み動画に独自のサムネイルと再生ボタンを実装

YouTube Player APIを利用してYouTubeの埋め込み動画に独自のサムネイルと再生ボタンを実装する

WebサイトとYouTubeを連携して、WebページにYouTube動画を埋め込んでコンテンツを作っていくことがありますが、そのままの埋め込みのデザインでWebページに載せていってもいいですが、ご自身のWebデザインに合わせて、動画のサムネイルから再生ボタンと、いろいろカスタマイズしたいこともあります。

YouTubeのIFrame Player APIを利用することで、動画のキュー関数や再生や制御等のメソッドが使えるようになり、Webページに埋め込んだYouTube動画の制御や細かなカスタマイズができるようになります。

IFrame Player APIのリファレンスは、以下のページで確認できます。

↓　↓　↓

https://developers.google.com/youtube/iframe_api_reference

ご紹介したい便利な関数やメソッドは沢山ありますが、ここではサンプルとして、YouTube Player APIのplayer.playVideo()メソッドを利用して、YouTubeの埋め込み動画に独自のサムネイルと再生ボタンを実装する方法をご紹介していきます。

今回ご紹介する方法は、レスポンシブWebデザインにも対応しております。

独自のサムネイルと再生ボタンの実装

ますはHTMLから。
YouTube動画の埋め込みと、再生ボタンの構造を作っていきます。

HTML

<section id="yt-wrap">
  <div id="yt-block">
    <div class="videoWrapper">
      <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sQMvElxaGyk?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <span id="play"></span>
  </div>
</section>

埋め込みコードのiframeにて、YouTube動画のsrc属性の動画URLの末尾に「?enablejsapi=1」を追加して、APIでの動画の制御を有効にします。また、JavaScriptで処理できるようid「player」も付与しておきます。
他、spanタグで再生ボタンを作ります。

YouTube動画の上に重ねる画像は、HTMLで構築してpositionプロパティで調整してもいいですが、レスポンシブWebデザインに適応させ動画の幅が可変すると、うまくアスペクト比が調整できなかったりしますので、動画の領域にフィットするように、after擬似要素で対応していきます。

続いてはCSSです。

CSS

#yt-wrap {
  max-width: 560px;
  margin: auto;
}
#yt-block {
  margin: 2.8rem 0 5rem;
  position: relative;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/sample-tmb.png");
  background-size: cover;
}

.videoWrapper.pv::after {
  display: none;
}

#play {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 4rem;
  height: 4rem;
  background-color: #e2770b;
  border-radius: 50%;
  cursor: pointer;
  opacity: .95;
}

#play:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 34%;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 1rem solid transparent;
  border-left: 1.8rem solid #fff;
  box-sizing: border-box;
}

「.videoWrapper」と「.videoWrapper iframe」のセレクタに対しては、YouTube動画をレスポンシブWebデザインに対応するためのスタイルを指定しています。
「.videoWrapper::after」でafter擬似要素として、サムネイル画像を動画領域に重ねています。「.videoWrapper.pv::after」では、JavaScriptでの処理で、再生された時にクラスを付与させて非表示にするための指定となります。

id「play」は再生ボタンのデザインを作っています。
お好みの再生ボタンを作成してください。

続いて、JavaScriptです。

「onYouTubePlayerAPIReady」の関数までは決まり文句みたいなもので、tagやfirstScriptTag、playerといった変数名はそのままでもいいですし、別のわかりやすい名前にしていただいてもOKです。
「tag.src」でYouTube IFrame Player APIのプログラムを取得します。

JavaScript

let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player("player", {
    events: {
      onReady: onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  let playButton = document.getElementById("play");
  let el = document.getElementsByClassName("videoWrapper");
  playButton.addEventListener("click", function () {
    player.playVideo();
    playButton.style.display ="none";
    el[0].classList.add("pv");
  });
}

onYouTubePlayerAPIReady()関数にて、「player」というIDを付けたiframeに対してインスタンスを作成しイベントを設定します。
イベントは、「onPlayerReady」という独自のイベントの関数を作成しています。

独自の関数内で、document.getElementByIdやgetElementsByClassNameで要素を取得し変数で管理。addEventListenerでplayButtonのボタンがクリックされた時に、playVideo()で動画を再生させます。
他、styleプロパティで独自のボタンを非表示にしたり、重ねているサムネイル画像も非表示になるように、classList.add()でクラスを付与してCSSで対応します。

CSSではafter擬似要素で、YouTube動画の上に画像を重ねていますが、再生が始まったらbackgroundプロパティをnoneにして非表示にしたいところ。
ただ、getComputedStyle()メソッドやquerySelector()メソッドを利用すれば、afterやbeforeなどの疑似要素を取得することができますが、擬似要素はDOMで操作できません。
ですので、クラスを付与してCSSで対応するようにしました。

以下、実装の流れと動作です。
動画（約5分）