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

2026年01月26日

WEBサイト制作

#動画
#HTML
#css
#JavaScript
#tips

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

今回はVimeoの動画をランダムに切り替えるtipsを紹介します！

実装例

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

HTML例

まずvimeo APIを＜head＞内もしくは、＜script＞の前に記述してください。

<script src="https://player.vimeo.com/api/player.js"></script>

そうしたら下記コードを記述してください。

<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 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript例

document.addEventListener('DOMContentLoaded', () => {
    var movieList = ['1006070746', '1151507268', '1151507327'];
    var rand = Math.floor(Math.random() * movieList.length);
    var movie = movieList[rand];
    var options = {
        id: movie
    };
    var player = new Vimeo.Player(document.getElementById('js-player'), options);
});

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