最終更新日：2023.01.19

【JavaScript】Vimeo動画をポップアップで表示させる方法

今回はJavaScriptを使って、Vimeo動画をサイト上でポップアップ表示させる方法について紹介します。

　ポップアップを確認　

実装内容は以下

テキストをクリックするとVimeo動画をポップアップ
×ボタン、もしくは動画以外をクリックするとポップアップが閉じる
動画の途中で閉じても、もう１度ポップアップさせると続きから始まる
ポップアップしたときはスクロールできないように画面を固定する
スマホ、タブレットに合わせてレスポンシブ化

説明環境は以下

macOS Monterey 12.5
Visual Studio Code v1.70.1

この記事の目次

Vimeo動画をポップアップで表示させる方法

サイズの大きい動画をサイトで表示させる場合、YouTubeもしくはVimeoを使うことが多いですが、個人的にはVimeoがオススメです。

プライバシー設定が充実しているので、観覧できる人を絞れたり、動画を埋め込めるサイトを限定することもできます。また簡単に動画をダウンロードすることもできません。

今回はサイトにVimeo動画を表示させるために、以下のVimeo Player APIを使用します。

参考

Vimeo Player API

npm

Vimeo Player APIを読み込む

Vimeo Player APIを読み込みます。CDNを読み込んで使用する場合は以下です。

<script src="//cdn.jsdelivr.net/npm/@vimeo/player@2.17.1/dist/player.min.js"></script>

直接読み込みたい方はGitHubからどうぞ。

参考

Vimeo Player API

GitHub

webpackなどを使っていてnpmからインポートする場合は以下。

npm i @vimeo/player

基本的な使い方

ポップアップさせる前にVimeo Player APIの基本的な使い方を説明します。

単純に表示させたデモは以下です。

　動画の表示を確認　

まずはVimeo動画を表示させたいエリアをHTML側で指定します。今回はjs-vimeo-bodyの内側にVimeo動画を表示させます。

<div class="p-vimeo">
  <div class="p-vimeo__body" id="js-vimeo-body"></div>
</div>

JavaScript側で書く内容は以下です。（Webpackを使わない場合）

// webpackを使わない場合
(() => { 
   if (!document.getElementById('js-vimeo-body')) return;
   const options = {
      id: 453507367, // 動画ID
   };
   const player = new Vimeo.Player('js-vimeo-body', options);
   player.play();
})();

今回はwebpackを使わないを前提に説明しますが、使っている場合は書き方が変ります。

//webpackを使っている場合
import Player from '@vimeo/player';

const Vimeo = () => {
  if (!document.getElementById('js-vimeo-body')) return;

  const options = {
    id: 453507367,
  };
  const player = new Player('js-vimeo-body', options);
  player.play();
};

Vimeo();

Playerの部分で、表示させたいエリアのjs-vimeo-bodyを指定して、optionsの部分で動画のIDを指定しています。

Vimeoの動画IDはURLのところにあります。

optionsには複数のプロパティが用意されています。
例えば以下の設定で考えてみます。

byline … 投稿者情報の表示
portrait … 左上のVimeoのロゴの表示
title … 動画タイトルの表示
color … 動画画面で使用するテーマカラー

Optionsを設定したデモは以下で確認してみてください。

　動画の表示を確認（Options）　

(() => { 
   if (!document.getElementById('js-vimeo-body')) return;
   const options = {
      id: 453507367, // 動画ID
      byline: false, // 投稿者部分の表示を非表示
      portrait: false, // 左上のVimeoのマークの非表示
      title: false, // タイトルの非表示
      color: 'ff1f38',
      
   };
   const player = new Vimeo.Player('js-vimeo-body', options);
   player.play();
})();

Optionsで設定できる項目については公式で確認してみてください。

参考

optionsのプロパティ一覧

Vimeo Player API

Vimeo動画をポップアップさせる

まずはポップアップさせるデモサイト作ったので、確認してみてください。

　ポップアップを確認　

実装内容は以下です。

テキストをクリックするとVimeo動画をポップアップ
×ボタン、もしくは動画以外をクリックするとポップアップが閉じる
動画の途中で閉じても、もう１度ポップアップさせると続きから始まる
ポップアップしたときはスクロールできないように画面を固定する
スマホ、タブレットに合わせてレスポンシブ化

HTMLで書くこと

<div class="p-vimeo-aria">
  <div class="p-vimeo-text" id="js-vimeo-open">ポップアップするぜ</div>
    <div class="p-vimeo" id="js-vimeo">
      <div class="p-vimeo__inner">
        <div class="p-vimeo__wrap">
          <div class="p-vimeo__close">
            <button class="p-vimeo__close-button" id="js-vimeo-close-button"><span></span><span></span></button>
          </div>
          <div class="p-vimeo__body" id="js-vimeo-body"></div>
        </div>
      </div>
      <div class="p-vimeo__mask" id="js-vimeo-mask"></div>
    </div>
  </div>
</div>

それぞれのID名に役割を持たせています。

js-vimeo-open … ポップアップさせるボタン
js-vimeo … ポップアップの表示・非表示、切り替え
js-vimeo-close-button … ポップアップを閉じるボタン
js-vimeo-body … Vimeo Player APIを使ってVimeo動画を表示させる
js-vimeo-mask … 動画背景の暗いマスク。クリックされれば動画が閉じる

Sassで書くこと

.p-vimeo {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
.p-vimeo__inner {
  display: table;
  width: 100%;
  height: 100%;
  max-width: 780px;
  padding-inline: 40px;
  margin-inline: auto;
}
.p-vimeo__wrap {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.p-vimeo__close {
  text-align: right;
}
.p-vimeo__close-button {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: -35px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  > span {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: white;
    &:first-child {
      transform: rotate(-45deg);
    }
    &:last-child {
      transform: rotate(45deg);
    }
  }
}
.p-vimeo__body {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden; //iOS Safariでも背景を動かないようにする用
  > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
}
.p-vimeo__mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden; //iOS Safariでも背景を動かないようにする用
}

Vimeo動画の表示サイズはp-vimeo__innerで指定しているmax-widthで調整しています。ここはお好みのサイズを指定してください。

動画を画面サイズに合わせてレスポンシブさせたいので、p-vimeo__bodyに対して高さをpadding-bottom: 56.25%; と指定して、iframeについてはposition: absolute;を使って表示させています。

JavaScriptで書くこと

Javascriptで書く内容は以下になります。
※以下はWebpackを使わない場合の書き方になります。

　ポップアップを確認　

const VimeoPopup = () => {
const vimeoOpen = document.getElementById('js-vimeo-open');
  const vimeoArea = document.getElementById('js-vimeo');
  const vimeoBody = document.getElementById('js-vimeo-body');
  const vimeoMask = document.getElementById('js-vimeo-mask');
  const vimeoCloseButton = document.getElementById('js-vimeo-close-button');
  const siteBody = document.querySelector('html body');

  if (!(vimeoOpen && vimeoArea && vimeoBody && vimeoCloseButton && vimeoMask && siteBody)) return;

  const options = {
    id: 453507367,
    byline: false, // 投稿者部分の表示
    portrait: false, // 左上のVimeoのマークの表示
    title: false, // タイトルの表示
  };
  const player = new Vimeo.Player('js-vimeo-body', options);

  const msM = 300;
  let flag = false;
  let scrollY;

  const hide = {
    visibility: 'hidden',
    opacity: '0',
  };
  const show = {
    visibility: 'visible',
    opacity: '1',
  };
  const normal = {
    width: 'auto',
    position: 'static',
  };
  const fixed = {
    width: '100%',
    position: 'fixed',
  };

  // styles関数
  const addStyleFunc = (elem, styles) => {
    Object.keys(styles).forEach((key) => {
      elem.style.setProperty(key, styles[key]);
    });
  };
  // 初期設定
  addStyleFunc(vimeoArea, hide);
  vimeoArea.style.setProperty('transition', `opacity ${msM}ms ease, visibility ${msM}ms ease`);
  siteBody.style.cssText = 'width: auto; position:static;';

  // ポップアップを非表示にする関数
  const invisibleFunc = () => {
    if (flag) {
      flag = false;
      const positionY = Number(siteBody.dataset.position);
      addStyleFunc(vimeoArea, hide);
      siteBody.dataset.position = '0';
      addStyleFunc(siteBody, normal);
      window.scrollTo(0, positionY * -1);

      player.pause().catch(() => {
        window.location.reload();
      });
    }
  };
  // ポップアップを表示させる関数
  const visibleFunc = () => {
    if (!flag) {
      flag = true;
      addStyleFunc(vimeoArea, show);
      scrollY = document.scrollingElement.scrollTop;
      siteBody.dataset.position = `${scrollY * -1}`;
      siteBody.style.setProperty('top', `${scrollY * -1}px`, 'important');
      addStyleFunc(siteBody, fixed);

      player.pause().catch(() => {
        window.location.reload();
      });
    }
  };
  vimeoOpen.addEventListener('click', visibleFunc);
  vimeoCloseButton.addEventListener('click', invisibleFunc);
  vimeoMask.addEventListener('click', invisibleFunc);
};

window.addEventListener("DOMContentLoaded", VimeoPopup);

たとえばテキストをクリックしたタイミングで動画をスタートさせたい場合は、visiblityFunc関数にあるpause()の部分をplay()にします。

player.play().catch(() => {
    window.location.reload();
});

playやpause以外のメソッドについては以下を参考にしてみてください。

参考

Methods

Vimeo Player API

限定公開のVimeo動画をポップアップさせる場合は？

Vimeoでは動画を観覧できる人を絞る「限定公開」というプライバシー設定があります。動画を見るためのURLを知っている人はだれでも見ることができますが、Vimeo動画の検索には表示されません。

参考

Vimeoのプライバシー設定について

Vimeo

この「限定公開」されている動画をサイト上で表示させるには、HTML側とJavaScript側のコードを一部変更する必要があります。

HTMLに書くこと

先ほどのコードと違う点は、9行目にdata-vimeo-urlを設定して、限定公開用のURLをセットします。「限定公開」されているURLは以下の例のように?h=以降に英数字が設定されています。

例）https://player.vimeo.com/video/453507367?h=5268896f9b

<div class="p-vimeo-aria">
  <div class="p-vimeo-text" id="js-vimeo-open">ポップアップするぜ</div>
    <div class="p-vimeo" id="js-vimeo">
      <div class="p-vimeo__inner">
        <div class="p-vimeo__wrap">
          <div class="p-vimeo__close">
            <button class="p-vimeo__close-button" id="js-vimeo-close-button"><span></span><span></span></button>
          </div>
          <div class="p-vimeo__body" id="js-vimeo-body" data-vimeo-url="https://player.vimeo.com/video/453507367?h=5268896f9b"></div>
        </div>
      </div>
      <div class="p-vimeo__mask" id="js-vimeo-mask"></div>
    </div>
  </div>
</div>

JavaScriptで書くこと

基本的には「公開」と書き方は一緒ですが、optionsの部分では動画IDを指定しません。「限定公開」の場合は、HTML側のdata-vimeo-urlの部分で動画を表示させることになります。

// Vimeo動画のオプション
  const options = {
    // id: 453507367, ここの動画IDは指定しない
    byline: false, // 投稿者部分の表示
    portrait: false, // 左上のVimeoのマークの表示
    title: false, // タイトルの表示
  };

おわりに

今回はJavaScriptを使って、Vimeo動画をサイト上でポップアップ表示させる方法について紹介しました。Videoタグを使って動画を表示させても可能ですが、5MB〜10MBを超えてしまう場合は表示速度のことも考えて、VimeoもしくはYouTubeで表示させるようにしましょう。

特定のサイトにのみ動画を表示させるなど限定的に公開させるのであればVimeoがオススメです。

こちらの記事も読まれています

【JavaScript】Vimeo動画をポップアップで表示させる方法

Vimeo動画をポップアップで表示させる方法

Vimeo Player APIを読み込む

基本的な使い方

Vimeo動画をポップアップさせる

HTMLで書くこと

Sassで書くこと

JavaScriptで書くこと

限定公開のVimeo動画をポップアップさせる場合は？

HTMLに書くこと

JavaScriptで書くこと

おわりに

ズームアウトしながらフェードで切り替わるZoom Sliderの使い方

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

webpack5の設定方法 - EJS、TypeScript、Dart SassとAutoprefixer、ESLint、Prettierを自動化する

Dreamweaver CC 2019でCompassを使うための設定方法

【JavaScript】スクロールアニメーションをIntersection Observerを使って実装する方法

Photoshopで写真を水彩画にするテクニック

GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法

FLOCSSベースのサイト設計 - 破綻しないルールを決める

【DIY】長いテーブルの作り方 - 2700mm以上の作業机を作る手順

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

TypeScriptでオブジェクトをループする方法 - ４つのループ処理を紹介

「Live Sass Compiler」の設定方法 - VScodeでSassを書く

【WordPress】カスタム投稿を使った絞り込み検索をプラグインなしで実装する - ページネーション有り

Photoshopで写真を水彩画にするテクニック

GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法

FLOCSSベースのサイト設計 - 破綻しないルールを決める

【DIY】長いテーブルの作り方 - 2700mm以上の作業机を作る手順

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

TypeScriptでオブジェクトをループする方法 - ４つのループ処理を紹介

「Live Sass Compiler」の設定方法 - VScodeでSassを書く

【WordPress】カスタム投稿を使った絞り込み検索をプラグインなしで実装する - ページネーション有り