Javascript 全屏播放youtube视频

我知道这个问题已经被问了很多次，但我似乎无法解决我的问题。所以我在我的网站上添加了youtube视频iframe，当视频没有播放时，它会全屏显示。然后，当我点击播放时，它会在左右两侧增加间隙，视频不会以完整的大小播放。我从控制台检查，发现

视频

标签导致了问题。我尝试将css添加到视频标签中，但它似乎甚至没有显示在控制台中，所以没有添加

HTML:

您可以在此处检查问题：

您可以转到第三张幻灯片，youtube iframe将以100%的宽度显示，但当您单击“播放”时，它将显示两侧的间隙

---

有人能帮我解决这个问题吗？

我记得我很久以前就遇到过这个问题，我在这里给出了答案：

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

它需要

jQuery

才能工作。（并稍微更改

iframe

属性）

---

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

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）-（来源：

---

希望这有帮助=]

发生的事情是我的整个滑块消失了。所以它不起作用。正如我所说，视频在不播放时以全宽显示，播放时会在两侧增加间隙。您可以添加一个事件侦听器函数addClassByClick（iframe）{$（iframe）.addClass（“活动”）}``CSS:````。活动{位置：绝对；宽度：100%；高度：100%；顶部：0；左侧：0；底部：0；右侧：0；显示：灵活；灵活方向：列；对齐内容：中心；对齐项目：中心；```它不起作用。问题是导致“视频”标记而不是iframe。您可以查看我发布的链接并查看实际问题。您是否可以提供指向您的示例的链接，您似乎想这样做，但最终没有连接任何链接。@Buttered_Toast抱歉，我忘了发布链接。我编辑了我的问题。谢谢

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

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

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