• 最終更新日:

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

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

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

実装内容は以下

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

説明環境は以下

  • macOS Monterey 12.5
  • Visual Studio Code v1.70.1
この記事の目次

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

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

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

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

Vimeo Player APIを読み込む

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

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

直接読み込みたい方は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を設定したデモは以下で確認してみてください。

(() => { 
   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で設定できる項目については公式で確認してみてください。

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

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

実装内容は以下です。

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

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;を使って表示させています。

iOS Safariだとbody要素にoverflow: hidden;を指定しても背景が固定されません。そこでポップアップのコンテンツであるp-vimeo__bodyとマスク部分のp-vimeo__maskにもoverflow: hiddenを指定しています。

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;
  vimeoArea.style.visibility = 'hidden';
  vimeoArea.style.opacity = '0';
  vimeoArea.style.transition = `opacity ${msM}ms ease, visibility ${msM}ms ease`;
  vimeoMask.style.visibility = 'hidden';
  vimeoMask.style.opacity = '0';
  vimeoMask.style.transition = `opacity ${msM}ms ease, visibility ${msM}ms ease`;

  // ポップアップを非表示にする関数
  const invisibleFunc = () => {
      flag = false;

      vimeoMask.style.opacity = '0';
      vimeoMask.style.visibility = 'hidden';
      vimeoArea.style.opacity = '0';
      vimeoArea.style.visibility = 'hidden';

      siteBody.style.overflow = '';
      siteBody.style.touchAction = '';
      siteBody.style.height = '';

      player.pause().catch(() => {
        window.location.reload();
      });
    }
  };
  // ポップアップを表示させる関数
  const visibleFunc = () => {
    if (!flag) {
      flag = true;
      siteBody.style.overflow = 'hidden';
      siteBody.style.touchAction = 'none';

      vimeoMask.style.visibility = 'visible';
      vimeoMask.style.opacity = '1';
      vimeoArea.style.visibility = 'visible';
      vimeoArea.style.opacity = '1';

      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以外のメソッドについては以下を参考にしてみてください。

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

Vimeoでは動画を観覧できる人を絞る「限定公開」というプライバシー設定があります。動画を見るためのURLを知っている人はだれでも見ることができますが、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がオススメです。