html - 嵌入youtube视频高度问题

Question

我正在尝试将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>

Answer 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