javascript - 全屏播放 youtube 视频

Question

我知道这个问题已经被问过很多次了，但我似乎无法解决我的问题。所以我在我的网站上添加了 youtube 视频 iframe，当视频没有播放时，它会全屏显示。然后，当我点击播放时，它会在左右两侧增加间隙，并且视频不会以全尺寸播放。我从控制台进行了检查，发现 video 标签导致了问题。我尝试将 css 添加到视频标签，但它似乎甚至没有显示在控制台中，因此没有添加。

HTML:

<iframe height="450" src="https://www.youtube.com/embed/ftAQc3L1gR4?rel=0&amp;autoplay=0&amp;loop=0&amp;modestbranding=0&amp;showinfo=0&amp;feature=0&amp;controls=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" id="player_1" style="width: 100%;"></iframe>

CSS:

iframe video {
  width: 100% inherit !important;;
  height: inherit !important;
  left: inherit !important;
  top: inherit !important;
  position: relative !important;
}

您可以在此处查看问题:https://raadev.wpengine.com

您可以转到第三张幻灯片，那里会显示一个 100% 宽度的 youtube iframe，但是当您单击播放时，它会在两边显示空白。

谁能帮我解决这个问题？

Answer 1

<div class="videoContainer">
    <iframe class="videoContainer__video" width="1920" height="1080" src="http://www.youtube.com/embed/IsBInsOj8TY?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=IsBInsOj8TY" frameborder="0"></iframe>
</div>

你的 CSS 应该是这样的:

.videoContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe {
  /* optional */
  width: 100%;
  height: 100%; 
}