带有响应式引导、Vimeo 嵌入和 WordPress 主题的 CSS 1 px 边框


CSS 1 px border with responsive bootstrap, Vimeo embed, and WordPress theme

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

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

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

但实际的嵌入要复杂得多，并且会在其上添加引导流样式等。我尝试检查所有元素并对其进行编辑，但无法弄清楚。有这个问题的页面的一个很好的例子是：http://www.universityoffashion.com/disciplines/fashion-art/

这个答案不正确。 .player .video-wrapper 位于加载到 iframe 的 HTML 文档中，因此 !important 什么都不做，因为 iframe 从字面上加载了框架内的不同网页，这绝不会受到本地 CSS 的影响。在过去的一年里，Vimeo 上有多个关于这个问题的报告，而且它们基本上没有响应。

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

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

1
2
3
4
5
6
position: relative;
top: 0;
left: 0;
width: 100%;
border: 5px solid gold;
box-sizing: initial;

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

package器隐藏了溢出，然后，1px 边框消失了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 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%);
}

我尝试在 iframe 标记中使用内联 css，它可以正常工作并且响应速度也很好。

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

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

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

1
2
3
4
5
6
.player .video-wrapper {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    position: absolute;
    width: 100%;
}

替换为：

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

}

相关讨论