【JavaScript】YouTube埋め込み動画をランダムで切り替える

2025年05月12日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

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

今回はメインビジュアル等に使えそうなランダムで再生する動画を変えるtipsを紹介します！

実装例

リロードしてみると別の動画に切り替わります。

HTML例

<div class="player-wrap">
  <div id="js-player"></div>
</div>

CSS例

.player-wrap{
  margin: 0 0 40px;
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 56.5%;
}
#js-player{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript例

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playButton =  document.getElementById('js-player');
window.addEventListener('load', function() {
  var movieList = ['x789pkHxC4k', '9UoxVDnAEpg', 'jcQ-8FWCtnw'];
  var rand = Math.floor(Math.random() * movieList.length);
  var movie = movieList[rand];
    var player = new YT.Player('js-player', {
      height: '100%',
      width: '100%',
      playerVars: {
        autoplay: 1,
        rel: 0,
        playsinline: 1
      },
      videoId: movie
    });
});

変数movieListに3つのYouTube動画IDを配列にして代入してます。