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

2025年07月22日

WEBサイト制作

#動画
#HTML
#css
#JavaScript
#tips

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

今回は「vimeo API」を使ったtipsを紹介します。

以前、YouTubeのサムネイルに関するtipsを紹介したのですが、
結構人気なので、Vimeo版を実装してみました！
◆過去記事はコチラ（【JavaScript】サムネイルをクリックしてYouTubeを再生する）

実装例

HTML例

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

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

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

<div class="movie">
    <iframe class="js-iframe-target" src="https://player.vimeo.com/video/1006070746"  frameborder="0" allow="" allowfullscreen></iframe>
    <img class="thumb js-movie" src="./thumbnail01.png" alt="vimeoサムネイル">
</div>
<div class="movie">
    <iframe class="js-iframe-target" src="https://player.vimeo.com/video/438077436"  frameborder="0" allow="" allowfullscreen></iframe>
    <img class="thumb js-movie" src="./thumbnail02.png" alt="vimeoサムネイル">
</div>

CSS例

.movie{
    margin: 0 0 40px;
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 55.5%;
}
.js-iframe-target{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.thumb{
    display: block;    
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}

JavaScript例

document.querySelectorAll('.js-movie').forEach(function(element) {
    element.addEventListener('click', function(e) {
        var parent = element.closest('.movie');
        var iframe = parent.querySelector('.js-iframe-target');
        var player = new Vimeo.Player(iframe);
        player.play();
        element.style.display = 'none';
    });
});