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

Question

我试图找到一种方法来隐藏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%;
}

Answer 1

对于您的用例,我认为您不能仅使用CSS.

通常我们在视频iframe周围添加letterboxing或柱式拳击,以保持高度和宽度以一定的比例进行演示.但在这种情况下,黑色边框就像css背景一样简单.

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

在您的情况下,此视频实际上在实际视频中具有信箱,您可以从iframe中的视频标记的来源中看到该信箱.我不确定你为什么会这样,padding-top:30但这会使黑色边框更大.由于内置的​​信箱,你需要更多地破解你的情况.我在这里整理了一个jsfiddle演示,其中包含一些注释,但它使用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);
}