Question

我在使用Vimeo在我的WordPress主题中嵌入视频时遇到问题。视频嵌入左侧的Vimeo背景的1px边框显示（在Chrome中）。 Bootstrap也是用这个主题实现的。

基本上，当嵌入Vimeo iframe时，它会在左侧显示一个非常薄的黑色边框，这是其iframe的Vimeo默认背景。我们有白色背景，因此在某些页面上非常明显。如果您查看源代码，则基本嵌入是：

<div>
   <iframe src="http://player.vimeo.com/video/64685575" width="940" height="528" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

但是实际的嵌入要复杂得多，而且它上面装有自举流体样式。我已经尝试检查所有元素并对其进行编辑，但无法弄清楚。有这个问题的网页的好例子是：http://www.universityoffashion.com/disciplines/fashion-art/

Answer 1

这个答案是不正确的。 .player .video-wrapper在HTML文档中加载到iframe中，因此！important不会做任何事情，因为iframe会在框架内部加载一个不受本地CSS影响的不同网页。在过去的一年中，Vimeo已经有多个关于这个问题的报告，它们基本上没有响应。

我的解决方案是将我的iframe放在div中，其位置为：absolute，top：0，left：0，width：100％。该宽度是div的父级的100％，在我的情况下，它受响应布局中的列宽限制。这实际上有效，不像之前标记正确的答案。

Answer 2

您需要更改视频包装div的背景颜色。带有类视频包装器的div具有＃000的背景。将其更改为#fff。

以下是第2行的player.css中的代码。

.player .video-wrapper {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    position: absolute;
    width: 100%;
}

将其替换为：

 .player .video-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
position: absolute;
width: 100%;

}

Answer 3

我尝试使用iframe标签中的内联css，它也起作用，并且响应也很好。

<iframe ..... style="border:1px solid;"></iframe>

Answer 4

我的解决方法是扩大iframe顶部和左侧2px的宽度和高度。之后，将iframe集中在容器包装中。

包装器隐藏了溢出内容，然后1px的边框消失了。

/* Embed iframe wrapper */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16 x 9 */
}

/* Vimeo/Youtube Iframe */
.embed-responsive iframe{
  position: absolute;
  bottom: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 5

这是对我有用的代码， you must put this in the div which has the iframe inside:

position: relative;
top: 0;
left: 0;
width: 100%;
border: 5px solid gold;
box-sizing: initial;

CSS 1 px边框，具有响应式引导程序，Vimeo嵌入和WordPress主题

5 个答案: