时间戳

首页 > 解决方案 > 嵌入 youtube 视频高度问题

html - 嵌入 youtube 视频高度问题

问题描述

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

标签： htmlcssyoutubeembedresponsive

解决方案

这是我们在模板上添加视频时面临的非常常见的问题。您只需在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>

演示

推荐阅读