Question

我在网页中插入了一个youtube嵌入代码（iframe代码），并使用css column-count自动将页面中的文本分成两列。

.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

问题是当我在初始视口后嵌入youtube视频时，它显示为黑色图像。这是一个例子：http://jsfiddle.net/KTvCV/689/。似乎这是youtube和chrome的错误。这个问题有什么解决方案/修复方法吗？尝试了不同的事情而没有工作，所以考虑使用jQuery columnizer而不是CSS列数。

Answer 1

难以复制此问题 - 观察

我发现Chrome尝试以多列格式显示iframe嵌入式视频的行为非常不一致。

以下似乎并未始终如一地清除问题：

我尝试在文本周围添加<p>标记，认为它可能是行长度相关的怪癖。
我尝试清除缓存。
更改列的宽度
更改iframe的尺寸

此外，折叠下方的视频似乎无法渲染（绘制？）。

一旦有效的案例

似乎表现良好的唯一情况是在第一列中出现一个视频。

我不知道为什么会这样。

Answer 2

我可以通过将YouTube视频与列数相结合来确认问题。 http://codepen.io/djschoone/pen/VYdaOv显示了正在发生的事情。视频移动到另一个位置。

HTML

<html>
 <body>
   <article class="display-2col">
   <p>Text</p>
   <p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&amp;autoplay=0&amp;wmode=opaque&amp;controls=0&amp;showinfo=0" width="614"     height="370" class="video-filter video-youtube vf-gustb3vs4ky" frameborder="0">    </iframe></p>
    </article>
  </body>
</html>

CSS

.display-2col{
  -moz-column-count:2;
  -moz-column-gap:20px;
  -webkit-column-count:2;
  -webkit-column-gap:20px;
  column-count:2;
  column-gap:20px;
}

与IE和FF的不同之处在于视频与Chrome上的标签一起放置，而其他人则获得了标签。

我猜这与定位有关。看着它！

Answer 3

I had this problem, for me the fix was to give the <iframe> an explicit width in pixels, position: relative, z-index, and a 3d-transform such as transform: translate3d(0, 0, 0).

Experienced in Chrome 43.0.2357.130 (64-bit) for OS X Yosemite 10.10.3

Answer 4

对我来说，仅在我的transform: translate3d(0, 0, 0)标记上添加<video>才有效。

注意：我使用的是<video>标签，而不是嵌入的<iframe> YouTube视频。但是我在列上也遇到了同样的问题。

使用css'column-count'时youtube嵌入的bug

4 个答案:

难以复制此问题 - 观察

一旦有效的案例