嵌入youtube视频高度问题

Question

我正在尝试将一个 YouTube 视频嵌入到我的项目中，它有效，而且我还尝试像大多数教程一样应用 16:9 与 padding-bottom: 56.25% 的比率。

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

这是我的代码笔尝试：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

这是我们在 template.You 上添加视频时面临的非常常见的问题，只需在 OUTER[ 上添加 max-width 和宽度属性 =26=] div 不在 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

嵌入youtube视频高度问题

Embed youtube video height issue

html

css

embed

youtube

responsive