全屏播放 youtube 视频答案

【问题标题】：Play youtube video in full screen全屏播放 youtube 视频
【发布时间】：2020-04-11 04:52:09
【问题描述】：

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

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，但是当您点击播放时，它会在两侧显示间隙。

谁能帮我解决这个问题？

【问题讨论】：

能否提供您的示例的链接，您似乎想这样做，但最终没有连接任何链接。
@Buttered_Toast 抱歉，我忘记发布链接了。我编辑了我的问题。谢谢！

标签： javascript html css youtube

【解决方案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%; 
}

【讨论】：

发生的事情是我的整个滑块消失了。所以它不起作用。正如我所说，视频在不播放时会全宽显示，而在播放时会在两边增加间隙。
你可以添加一个事件监听器。 ``` 函数 addClassByClick(iframe){ $(iframe).addClass("active") } ``` CSS: ``` .active { position: absolute;宽度：100%；高度：100%；顶部：0；左：0；底部：0；右：0；显示：弯曲；弹性方向：列；证明内容：中心；对齐项目：居中； } ```
它不起作用，伙计。问题是导致“视频”标签而不是 iframe。您可以查看我发布的链接并查看实际问题。

【解决方案2】：

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

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

Fiddle

【讨论】：

【解决方案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）

希望这会有所帮助 =]

【讨论】：