删除使用 CSS 嵌入的 vimeo iframe 上的黑色边框？

Question

我正在尝试找到一种方法来隐藏 vimeo 视频顶部和底部的黑条。我认为可能有办法用 CSS 来掩盖它们。

我基本上想通过下面链接中的图片来实现这个人想要实现的目标，除了我想用嵌入的视频来实现它，同时保持它的响应性。

Removing black borders 4:3 on youtube thumbnails

非常感谢。

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">

   <div class='embed-container'>
      <iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>

</section>

CSS

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
}

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

Answer 1

对于您的用例，我认为您不能只使用 css。

通常我们会在视频 iframe 周围添加信箱或柱箱，以将高度和宽度保持在一定比例以进行展示。但在这种情况下，黑色边框就像 CSS 背景一样简单。

为了保持响应，您可以将高度设置为零（就像您所做的那样）并使用填充技巧来保持视频的纵横比（在本例中为 16:9 视频；9/16 * 100 = 56.25%）。该数字将是您的 padding-top 或 padding bottom 值。由于填充是用百分比测量的，因此无论您将视频调整到什么宽度，这都会相对于宽度保持正确的比率来缩放填充。

在您的情况下，该视频实际上在实际视频中具有信箱，您可以从 iframe 中的视频标签的源中看到。我不确定你为什么有padding-top:30，但这会使黑色边框更大。由于内置的​​信箱，您将需要更多地破解您的情况。我整理了一个jsfiddle demo here，其中包括一些 cmets，但它使用 JS 来实现您正在寻找的东西。

代码的概念如下：

• 您希望外部容器从底部和顶部裁剪掉 视频。假设您希望视频具有响应性并被裁剪，您需要始终让实际视频大于掩盖它的外部容器。
• 视频应根据视频的宽度与顶部边框的厚度向上移动
• 您需要稍微缩小外部容器的高度以补偿负上边距，但仍隐藏视频的底部

我个人不喜欢在调整大小时进行昂贵的 DOM 操作，这可能是您要求仅使用 css 但 FWIW 的原因，您有演示。

理想情况下，您最好的选择是重新录制视频而不使用信箱，因此您只需要填充 hack。

Answer 2

使用 CSS 将所有边缘剪掉 1px：

.embed-container { 
    position: relative; 
    padding-bottom: 43%;        /* Aspect ratio of the video */
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: -1px; 
    left: -1px;
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
}

Answer 3

HTML：

<div class="js-video [vimeo, widescreen]">
  [video html goes here]
</div>

CSS：

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 57.25%;
}

.js-video.vimeo {
  padding-top: 0;
}

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

你会发现更多细节here

Answer 4

我遇到了同样的问题，问题很容易解决。我的视频使用 oEmbed 嵌入到 Wordpress 页面和帖子中。 Wordpress 将我的嵌入视频包装在 <p> 标签中，<p> 标签有一些边距，这导致我的视​​频顶部和底部出现黑色边框。我使用以下 jQuery 代码从嵌入的视频中删除了 <p> 标签：

$('.embed-container iframe').unwrap();

Answer 5

我通过删除 .embed-container

中的 padding-top 解决了这个问题

底部填充：56.25%；将屏幕比例设置为 16:9 并删除顶部和底部的黑条。 padding top 这里会增加额外的黑条区域。

Answer 6

我使用这个 github 帖子的一部分为这个确切的问题创建了一个解决方案。去除黑条。它不会改变 vimeo 的背景颜色，而只是将其隐藏在视口中。

https://github.com/davatron5000/FitVids.js/issues/130

#myid {
  height: 112.6%;
} 

但是，如果您使用 CSS“vw”（视口宽度）添加宽度，它将在任何显示器/设备上保持一致，而不会显示黑色背景。我添加了一个边距，这样一旦宽度变短，iframe 就会在 div 中保持居中。

#myvimeoiframeID {
  height: 112%;
  width: 80vw;
  margin: 0 15% auto;

}

在保存视频的父容器中，我添加了：

.embed-container {
   padding-bottom: 40.25%;
}

这似乎可以确保视频显示在 div 中。当我删除此部分时，视频消失了，但您仍然可以在这里播放。所以底部填充有一些非常棒的东西：40.25%；

我将 vimeo 嵌入的 iframe 代码更改为 height="100%"。

因此，您可以为 iframe 添加高度，也可以在 css 中完成。为了通过 css 控制高度，我将 iframe 中的基本高度保持在 100%，并且对该基本高度的任何调整都是通过 css 进行的。

Answer 7

只需将frameborder="0" 作为您的属性之一。

Answer 8

我刚刚解决了这个问题 -

视频容器是用一个黑色透明条的 video-captions-container DIV 构建的。