移除 iframe 视频左右两侧的黑条

Question

我有一个使用 iframe 的嵌入式视频。但是视频左右两边都有黑条，视频原尺寸为2000 x 2000）

iframe 当前显示

html目前是：

.iframe-video {
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 30vh;
  overflow: none;
}
@media (max-width: 832px) {
  .iframe-video {
    width: 100%;
    height: 30vh;
    max-width: 80vw;
  }
}

<article>

  <div class="article2">Food</div>
  <h2 class="h2a">Our New Menu is ready</h2>
  
  <iframe src="/video/menu.mp4" class="iframe-video" frameborder="0" allowfullscreen="" title="post"></iframe>

  <p>Make your reservation ASAP!</p>

</article>

有什么简单的方法可以去掉两边的黑条吗？ 我尝试在当前 iframe 中添加另一个

包装器并设置填充底部。但是好像不行。

【问题讨论】：

• 视频是方形的，您将高度设置为 30vh，但宽度设置为 100%。虽然我们不知道 100% 是什么，但与 30vh 相比，它可能相当大。如果底层视频是方形的，有什么理由不将视频元素设置为方形？
• 还有一个

  有另一个视频，大小 4096width，2160height。所以，不知道如何保留两个 iframe，但没有左右两侧的黑色边框。感谢您回答我的问题。
• 如果您需要适应两种不同的视频宽高比，您的示例应该会显示这一点。您可以在演示中使用图片而不是视频。
• 我不知道如何使用图像来演示 iframe
• 请更新您问题中的代码以添加第二个视频并说明它们具有不同的宽高比。如果你希望两者的高​​度都是 30vh，那么在第一个尝试 css width: 30vh 看看会发生什么。

Answer 1

因此，让您的视频在没有任何黑色侧边栏的情况下具有响应性的最佳方法是将您的 iframe 嵌套在父 div 中。您将使用position: relative 使此父容器“保存”视频，并使用position: absolute 显示iframe。父元素的键声明是padding: 56.25%。这样可以将元素保持在 16:9 的比例，并使您的视频具有响应性。

 .video-container { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
} 

.video-container iframe,
.video-container object,
.video-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

https://jsfiddle.net/EdgarAlexPoe/gak5cfsh/3/