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

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

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

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

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