嵌入 youtube 视频高度问题答案

【问题标题】：Embed youtube video height issue嵌入 youtube 视频高度问题
【发布时间】：2019-11-12 16:51:08
【问题描述】：

我正在尝试将一个 youtube 视频嵌入到我的项目中，它可以正常工作，并且我还尝试像大多数教程一样使用 padding-bottom: 56.25% 应用 16:9 的比例。

问题是，视频的高度恰好是容器的 100%，我应该在我的 CSS 中修复什么来摆脱顶部/底部黑条？

这是我的代码笔尝试：https://codepen.io/DieByMacro/pen/QXmJez

.HomePage-homeVideoWrapper-274 {
  height: 0;
  margin: auto;
  z-index: 1;
  position: relative;
  max-width: 720px;
  padding-top: 25px;
  padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}

<div class="HomePage-homeVideoWrapper-274">
  <iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

【问题讨论】：

摆脱height: 100%;，看看会发生什么？或者我认为你可以改变高度，如果你想要不同的东西。
@Chipster 摆脱 height: 100% 将使视频帧折叠并具有错误的比例，我正在尝试实现最大宽度为 720px 的流畅视频容器，如您所见
啊。我知道了。我现在明白了。如果你在另一个块中去掉 height: 0; 会发生什么？
试一试，您可能需要考虑调整容器 div 的高度，或者更准确地说，是最大高度。
确定我确实尝试过max-height 容器，但有趣的是它不会影响 iframe

标签： html css youtube embed responsive

【解决方案1】：

这是我们在模板上添加视频时遇到的非常常见的问题。您只需在 OUTER div 上添加 max-width 和 width 属性，而不是在 HomePage-homeVideoWrapper -274。无需在 HomePage-homeVideoWrapper-274 中添加 max-height。

.outer {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
    height: 0;
    margin: auto;
    z-index: 1;
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
  
  iframe {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;
  }
}

<div class="outer">
   <div class="HomePage-homeVideoWrapper-274">
  <iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>

Demo

【讨论】：