使用CSS删除vimeo iframe嵌入时的黑色边框？ [英] Removing black borders on a vimeo iframe embed using CSS?

问题描述

我想找到一种方法来隐藏vimeo视频的顶部和底部的黑色条。我认为可能有一个方法来覆盖他们的CSS。

我基本上想实现这个人想要实现的图像在下面的链接，除非我想

在黑色边框上移除黑边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对象，.embed-container embed {
 position：absolute; 
 top：0; 
 left：0; 
 width：100％; 
 height：100％; 
} 
  

解决方案

不认为你只能使用css。

通常我们在视频iframe周围添加遮幅或锁柱，以保持高度和宽度在一定比例介绍。但是在这种情况下，黑色边框就像css背景一样简单。

为了保持响应，您可以将高度设置为零（像您一样），并使用padding hack来保持视频的宽高比情况a 16：9视频; 9/16 * 100 = 56.25％）。该数字将是您的padding-top或padding底部值。由于填充以百分比测量，因此无论您将视频的大小设置为多大，都会根据宽度缩放填充，保持正确的比率。

在您的情况下，此视频实际上在实际视频中具有信箱，您可以从iframe中的视频标记的来源看到。我不知道为什么你有 padding-top：30 但是这使黑色边框更大。你需要更进一步的攻击你的情况，因为内置的letterboxing。我在这里放了一个 jsfiddle demo ，其中包括几个注释，但它使用JS来实现你的寻找。

代码的概念如下：

• 想要外部容器裁剪掉底部和顶部的
  视频。假设您希望视频具有响应性，并且被裁剪，您需要始终使实际视频大于屏蔽它的外部容器。


• 视频应向上移动视频的宽度与顶部边框的厚度之比


• 您需要缩小外部容器的高度，以补偿负顶部边距，但仍隐藏底部视频

我个人不喜欢在调整大小时进行昂贵的DOM操作，这也许是你单独要求CSS的原因， FWIW，你有演示。

理想情况下，你最好的选择是重新录制视频，而不是信箱，所以你需要的是填充黑客。 p>

I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.

I basically wanted to achieve what this person wanted to achieve with an image in the link below except I want to do it with an embedded video whilst keeping it repsonsive.

Removing black borders 4:3 on youtube thumbnails

Many thanks.

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

解决方案

For your use case, I don't think you'll be able to use just css.

Usually we add letterboxing or pillar boxing around video iframes to keep the height and width at a certain ratio for presentation. But in that case, the black borders would just be as simple as a css background.

To keep things responsive, you would set the height to something like zero (like you have) and use the padding hack to keep the aspect ratio of the video (in this case a 16:9 video; 9/16 * 100 = 56.25%). That number would be either your padding-top or padding bottom value. Since the padding is measured with percent, this scales the padding in relation to the width keeping the correct ratio no matter what width you size the video to.

In your case, this video actually has the letterboxing in the actual video which you can see from the source of the video tag within the iframe. I'm not sure why you have the padding-top:30 but that makes the black borders even bigger. You'll need to hack your situation even more though because of the built in letterboxing. I put together a jsfiddle demo here which includes a few comments but it uses JS to achieve what you're looking for.

The concept for the code is as follows:

• You want the outer container to crop off the bottom and top of the video. Assuming you wanted the video to be responsive, and be cropped, you need to always have the actual video be larger than the outer container which masks it.
• The video should be moved up in relation to how wide the video is vs the thickness of the top border
• You'll want to shrink the height of the outer container a bit to compensate for the negative top margin yet still hide the bottom portion of the video

Personally I don't like doing expensive DOM operations on resize which maybe is the reason you asked for solely css but FWIW, you have the demo.

Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.

这篇关于使用CSS删除vimeo iframe嵌入时的黑色边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！