Question

我知道这个问题已经被问过很多次了，但是我似乎无法解决这个问题。因此，我已将youtube video 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

我记得很久以前就有这个问题，我在这里做了一个答案：Scale and reposition iframe like background-size: cover

它需要jQuery才能起作用。（并稍微更改您的iframe属性）

Fiddle

Answer 3

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

Youtube始终会尝试保持视频的宽高比，因此，由于容器宽度和高度的限制，您有时会在左侧或右侧或顶部和底部看到黑色的“条”。

我通过制作视频链接和缩略图来处理它，单击该缩略图后，我打开了要显示的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视频

3 个答案: