全屏播放 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%; 
}

Answer 2

我记得我很久以前遇到过这个问题，所以我在这里做了一个回答：

它需要 jQuery 才能正常工作。（并略微更改您的 iframe 属性）

Fiddle

Answer 3

根据我的经验，您将无法使用当前的（桌面）滑块高度。

Youtube 将始终尝试保持视频的纵横比，因此由于容器宽度和高度的限制，您有时会看到左右或上下都是黑色的 "bars"。

我通过制作我的视频 link 和一个缩略图来处理它，然后在单击该缩略图后我打开一个包含我想要显示的 iframe 或视频的小狗。

只要记住纵横比

推荐的 YouTube 视频尺寸：240p (426 x 240)、360p (640 x 360)、480p (854 x 480)、720p (1280 x 720)、1080p (1920 x 1080)、1440p (2560 x 1440) ), 2160p (380 x 2160) -（来源：Kristen McCabe）

希望这对您有所帮助 =]

全屏播放 youtube 视频

Play youtube video in full screen

html

javascript

css

youtube