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周围添加letterboxing或柱式拳击，以保持高度和宽度以一定比例呈现。但在这种情况下，黑色边框就像css背景一样简单。

为了保持响应，你可以将高度设置为零（就像你一样）并使用填充黑客来保持视频的宽高比（在这种情况下是16：9视频; 9/16 * 100 = 56.25％）。该数字可以是您的填充顶部或填充底部值。由于填充是使用百分比测量的，因此无论视频大小的大小如何，都会根据宽度来缩放填充，保持正确的比例。

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

代码的概念如下：

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

就个人而言，我不喜欢在调整大小时执行昂贵的DOM操作，这可能是你要求单独使用css而不是FWIW的原因，你有演示。

理想情况下，您最好的选择是在没有信箱的情况下重新录制视频，所以您只需要填充黑色。

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并移除顶部和底部的黑条。在这里填充顶部会增加额外的黑色条形区域。

Answer 6

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

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

#myid {
  height: 112.6%;
}

但是，如果使用CSS＆＃34; vw＆＃34;（视口宽度）添加宽度，它将在任何监视器/设备上保持一致，而不显示黑色背景。我添加了一个边距，以便一旦宽度较短，iframe将保持在div的中心位置。

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

}

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

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

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

我将vimeo嵌入式iframe代码更改为高度=＆＃34; 100％＆＃34;。

因此您可以为iframe添加高度，或者您可以在css中执行此操作。为了通过css控制高度，我将iframe中的基本高度保持在100％，并且对该基本高度的任何调整都是通过css。

Answer 7

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

Answer 8

我刚刚解决了这个问题-

视频容器是用视频字幕容器DIV构建的，该容器是黑色透明条。

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

8 个答案: