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

ポップアップするぜ

headに書くこと

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

JavaScriptで書くこと

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);

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;
  > 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;
}

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>