8

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

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

去除 youtube 缩略图上的黑色边框 4:3

非常感谢。

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%;
}
4

8 回答 8

9

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

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

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

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

代码的概念如下：

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

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

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

于 2013-11-05T23:30:44.510 回答
8

使用 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);
}
于 2015-09-22T14:05:14.077 回答
2

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;
}

您将在此处找到更多详细信息

于 2014-07-31T14:56:59.920 回答
0

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

$('.embed-container iframe').unwrap();
于 2014-09-26T00:12:59.990 回答
0

简单地说frameborder="0"，作为你的属性之一。

于 2018-03-21T00:51:49.697 回答
0

我刚刚解决了这个-

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

于 2020-01-12T07:37:25.167 回答
0

我通过删除.embed-container中的padding-top解决了这个问题

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

于 2015-10-14T03:21:31.383 回答
0

我使用这个 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 进行的。

于 2017-03-29T20:28:50.160 回答