使用 CSS 去除嵌入的 vimeo iframe 上的黑色边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19794000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing black borders on a vimeo iframe embed using CSS?
提问by user2498890
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.
我试图找到一种方法来隐藏 vimeo 视频顶部和底部的黑色条纹。我认为可能有一种方法可以用 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
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
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%;
}
回答by okcoker
For your use case, I don't think you'll be able to use just css.
对于您的用例，我认为您不能只使用 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.
通常我们会在视频 iframe 周围添加信箱或柱箱，以保持高度和宽度为一定比例以进行展示。但在这种情况下，黑色边框就像 css 背景一样简单。
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.
为了保持响应，您可以将高度设置为零（就像您拥有的那样）并使用填充技巧来保持视频的纵横比（在这种情况下为 16:9 视频；9/16 * 100 = 56.25% ）。该数字将是您的 padding-top 或 padding bottom 值。由于填充是用百分比来衡量的，因此无论您将视频大小调整到什么宽度，这都会根据宽度缩放填充以保持正确的比例。
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:30but 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 herewhich includes a few comments but it uses JS to achieve what you're looking for.
在您的情况下，该视频实际上在实际视频中具有信箱，您可以从 iframe 中的视频标签源看到。我不确定为什么你有，padding-top:30但这会使黑色边框更大。由于内置的信箱，您将需要更多地破解您的情况。我在这里整理了一个jsfiddle 演示，其中包含一些评论，但它使用 JS 来实现您正在寻找的内容。
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.
就我个人而言，我不喜欢对调整大小进行昂贵的 DOM 操作，这可能是您要求仅使用 css 的原因，但 FWIW，您有演示。
Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.
理想情况下，您最好的选择是在没有信箱的情况下重新录制视频，因此您只需要填充 hack。
回答by matude
Cut the 1px off all edges with CSS:
使用 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);
}
回答by Alex Z
HTML:
HTML：
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
CSS:
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;
}
You will find more details here
您将在此处找到更多详细信息
回答by Glen
I had this same issue and the problem was simple to solve. My videos were embedded in Wordpress pages and posts using oEmbed. Wordpress was wrapping my embedded videos in <p>tags, the <p>tags had some margin which was causing black borders on the top and bottom of my videos. I used the following bit of jQuery to remove the <p>tags from my embedded videos:
我有同样的问题，这个问题很容易解决。我的视频使用 oEmbed 嵌入到 Wordpress 页面和帖子中。Wordpress 将我嵌入的视频包装在<p>标签中，<p>标签有一些边距，这导致我的视频顶部和底部出现黑色边框。我使用了以下 jQuery<p>代码从嵌入的视频中删除了标签：
$('.embed-container iframe').unwrap();
回答by user1506075
I solved this problem by removing padding-topin .embed-container
我通过删除解决了这个问题的填充顶在.embed容器
padding-bottom: 56.25%; will set screen ratio to 16:9 and remove the black bar in top and bottom. padding top here will add extra black bar area back.
填充底部：56.25%；将屏幕比例设置为 16:9 并删除顶部和底部的黑条。填充顶部此处将添加额外的黑色条区域。
回答by Keeya Wang-Jones
I created a solution for this exact problem using a portion of this github post. Removing Black Bars. It doesn't change vimeo's background color but merely hides it from the viewport.
我使用this github post的一部分为这个确切的问题创建了一个解决方案。去除黑条。它不会改变 vimeo 的背景颜色，而只是从视口中隐藏它。
https://github.com/davatron5000/FitVids.js/issues/130
https://github.com/davatron5000/FitVids.js/issues/130
#myid {
height: 112.6%;
}
However, If you add a width using CSS "vw"(viewport width) it will size consistently on any monitor/device without showing the black background. I added a margin so that the iframe will stay centered in the div once the width is shorter.
但是，如果您使用 CSS "vw"（视口宽度）添加宽度，它将在任何显示器/设备上保持一致的大小，而不会显示黑色背景。我添加了一个边距，以便一旦宽度变短，iframe 将保持在 div 的中心。
#myvimeoiframeID {
height: 112%;
width: 80vw;
margin: 0 15% auto;
}
}
In my parent container that holds the video, I added:
在我保存视频的父容器中，我添加了：
.embed-container {
padding-bottom: 40.25%;
}
This seems to make sure the video shows in the div. When I removed this section the video disappears but you can still here it play. So there is something that is pretty awesome with the padding-bottom: 40.25%;
这似乎确保视频显示在 div 中。当我删除此部分时，视频消失了，但您仍然可以在这里播放。所以填充底部有一些非常棒的东西：40.25%；
I changed the vimeo embedded iframe code to have a height="100%".
我将 vimeo 嵌入的 iframe 代码更改为 height="100%"。
So you can add a height to the iframe or you can do it in css. In order to control the height by css, I kept the base height in the iframe at 100% and any adjustments to that base height is through the css.
因此，您可以向 iframe 添加高度，也可以在 css 中进行。为了通过 css 控制高度，我将 iframe 中的基本高度保持在 100%，对该基本高度的任何调整都是通过 css 进行的。
回答by H. Yang
Simply put frameborder="0"as one of your attributes.
简单地将其frameborder="0"作为您的属性之一。
回答by Noah Cohn
I just solved this -
我刚刚解决了这个 -
The video container was built with a video-captions-container DIV which was a black transparent bar.
视频容器是用一个视频字幕容器 DIV 构建的，它是一个黑色的透明条。
