今回実装したいことを箇条書きで。

• 動画の複数設置
• 個別のサムネイルの取得
• 独自の再生ボタンでの動画制御
• CSMへの組み込みを想定（任意のIDを入力するだけで、動画とサムネを抽出）

動画を複数設置すること自体は、iframeを使用して簡単に行えますが、今回の場合は「CMSの入力画面でIDを入力するだけで動画とサムネを抽出できるようにしたい」という経緯があり、実装方法を模索する必要がありました。

メジャーなYoutubeであれば、参考記事がたくさんあるのですが、今回はVimeoということで記事がなかなか見つからなかったこともあったので、備忘録も兼ねて今回行なったことをメモしておきます（jQueryなどを正しく理解しきれていない部分があるので、冗長的なところもあるかと思います。基本的には自己責任で自由にカスタマイズしてください！）。

デモ

HTML

<div class="video">
    <div class="is-mov mov" data-vimeo-id="★動画のID"></div>
    <button class="is-play btn-play"><img src="動画にサムネイルが登録されていない場合に表示させる画像" alt="" class="is-thumb-img thumb-img" /></button>
    <input type="hidden" name="vimeo-id" value="★動画のID" class="is-thumb-id">
</div>

buttonの中にあるimgには、サムネイルが設定されていない場合の代替として、ダミーのサムネイルを仕込んでおきます。サムネイルが設定されている場合は、画像のsrcが、設定されたサムネイルのURLに書き換わります。

また動画のID（★）を入力する部分が2箇所あります。ここには管理画面から入力されたIDが出力されるイメージです。

jQuery

<script src="//player.vimeo.com/api/player.js"></script>
<script>
$(function() {
    $('.video').each(function() {
        var $this = $(this);

        // サムネイル表示
        var vimeoId = $this.find('.is-thumb-id').val();

        $.getJSON(
            'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId,
            null,
            function(data) {
                $this.find('.is-thumb-img').attr("src", data.thumbnail_url);
            }
        );

        // 再生ボタン連携
        var vimeoMov = $this.find('.is-mov');
        var player = new Vimeo.Player(vimeoMov);
        var vimeoPlayBtn = $this.find('.is-play');

        vimeoPlayBtn.on('click', function() {
            player.play();
        });

        // 再生ボタンの表示非表示
        player.on('play', function() {
            vimeoPlayBtn.fadeOut();
        });

        player.on('ended', function() {
            vimeoPlayBtn.fadeIn();
        });
    });
});
</script>

まずvimeo APIを呼び出します。

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

.videoの要素に対して、eachで繰り返し処理を行なっています。正直、今まで難しそうでeachを使ったことが無かったのですが、汎用性があるので使ってみると、とても便利なんだなと思いました（語彙力）。

$('.video').each(function() { 要素が入る });

$(this)を便宜上、変数にしています。
この場合のthisは、.videのこと。これがけっこう今回のキモかと思っています。現在処理をしている要素だけが対象となるので、関係のない動画が再生してしまうということがなくなります。

var $this = $(this);

サムネイル表示については、inputのvalueの動画IDを用いて、動画のサムネイルを取得し、imgのsrcへ出力しています。

        var vimeoId = $this.find('.is-thumb-id').val();

        $.getJSON(
            'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId,
            null,
            function(data) {
                $this.find('.is-thumb-img').attr("src", data.thumbnail_url);
            }
        );

続いて、再生ボタンと動画の連携は次の部分です。

        var vimeoMov = $this.find('.is-mov');
        var player = new Vimeo.Player(vimeoMov);
        var vimeoPlayBtn = $this.find('.is-play');

        vimeoPlayBtn.on('click', function() {
            player.play();
        });

サムネイル取得と同様に、thisを用いることで、現在処理をしている.videoの中の要素にだけ処理が行われるようにしています。

        player.on('play', function() {
            vimeoPlayBtn.fadeOut();
        });

        player.on('ended', function() {
            vimeoPlayBtn.fadeIn();
        });

play（再生時）とended（終了時）の再生ボタンの表示・非表示を指定しています。そのほかにも、pause（一時停止）などさまざまなメソッドが用意されています。

↓ サムネイルの取得・表示やeachでの繰り返し処理の参考。

Vimeo のサムネイル表示方法 | フロントエンド | Sugar Web Cloud

動画共有サービスといえば「YouTube」がパッと思い浮かぶと思います。2016年に実施された5ヶ国での「インターネット動画サービスの利用経験」アンケートでは...

https://rachicom.net/frontend/vimeo-thumbnail.html

↓ 再生ボタンと動画の連携などの参考。

VimeoのPlayer APIを使ってプレーヤーを操作する ｜ Tips Note by TAM

TAM のテクニカルチームがお届けする WEB技術ブログ！

https://www.tam-tam.co.jp/tipsnote/javascript/post10876.html

CSS

CSSは基本お好みで。

.video {
    background: #000;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    position: relative;
}

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

.video .btn-play {
    border: none;
    width: 100%;
    height: 100%;
    z-index: 15;
    position: absolute;
    top: 0;
    left: 0;
}

.video .btn-play:before {
    content: '';
    background: url(再生ボタン画像URL) no-repeat center / 61px rgba(0, 0, 0, .4);
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 16;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.video .btn-play:hover:before {
    background-color: rgba(0, 0, 0, .3);
}

.video .thumb-img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

ポイントとしては、今回、レスポンシブ対応ということで親となる.videoには、ウィンドウ幅が可変されても16:9を保てるようにpadding-top: 56.25%を付与しています。それに伴い、子要素はすべてposition: absolute;を指定しています。

再生ボタン（.btn-playには、サムネイルが入るので、再生マークについてはbeforeで指定。この辺はケースバイケースかなと思います。