【JavaScript】サムネイルをクリックしてYouTubeを再生する

2024年04月08日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆さん、普段からYouTubeの埋め込み動画をよく見ると思います。
あれって動画のサムネイルが表示されているんですが、
YouTubeのロゴが表示されたり、チャンネルのマークが表示されたり、
なんかイメージしたものと違う・・・自由にサムネイル設定できないの？という要望がよくあります。

そこで今回は、YouTubeの埋め込みのサムネイルを自由に設定するTipsを紹介します！

実装例

HTML例

今回はYouTube Player APIを使います。
◆公式ドキュメントはコチラ（外部サイトに遷移します）
まず＜head＞内に下記を記述してください。

<script src="https://www.youtube.com/iframe_api"></script>

そうしたら、準備完了。
HTMLを記述してください。

<div class="movie">
  <div class="movie-inner">
    <img class="thumb js-movie" src="./thumbnail.png" alt="Youtubeサムネイル" data-video="mp-auQGeJEE">
  </div>
  <div id="js-player" class="movie-player"></div>
</div>

data-video属性に動画のIDを記述してください。

CSS例

.movie{
  width: 600px;
  height: 360px;
  margin: 30px auto 30px;
  position: relative;
}
.movie-inner{
  display: block;    
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.thumb{
  width: 100%;
  max-width: 100%;
}
.movie-player{
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 600px) {
  .movie{
    width: 100%;
    height: 200px;
  }
}

JavaScript例

document.querySelectorAll('.js-movie').forEach(function(element) {
  element.addEventListener('click', function() {
    var youtubeId = this.getAttribute('data-video');
    var player = new YT.Player('js-player', {
      height: '100%',
      width: '100%',
      playerVars: {
        autoplay: 1,
        rel: 0,
        playsinline: 1
      },
      videoId: youtubeId
    });
    document.querySelectorAll('.js-movie').forEach(function(movie) {
      movie.style.display = 'none';
    });
  });
});