css - 使用 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 周围添加 letterboxing 或 pillar boxing 以保持高宽在一定比例下进行展示。但在那种情况下，黑色边框就像 css 背景一样简单。

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

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

代码的概念如下:

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

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

理想情况下，您最好的选择是在不使用信箱的情况下重新录制视频，这样您所需要的只是填充技巧。