使用css 'column-count‘时youtube嵌入的错误

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的bug。这个问题有什么解决方案/修复方案吗？尝试了不同的方法，但没有工作，所以我想用jQuery列化器来代替CSS列计数。

Answer 1

复制这个问题的困难-观察

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

以下内容似乎不能始终如一地解决问题：

我试着在文本周围加上标签，认为这可能是与行长有关的怪癖。我试着清除了cache.

• Changing，column

• Changing的宽度，

的尺寸

此外，下面的视频似乎没有被渲染(绘制？)。

只需一次就行了

唯一看起来渲染效果很好的情况是在第一列中出现了一个视频。

我不知道为什么会这样。

Answer 2

我遇到了这个问题，对我来说，修复方法是给<iframe>一个显式的像素width、position: relative、z-index和一个3D转换，比如transform: translate3d(0, 0, 0)。

在适用于OS X Yosemite 10.10.3的Chrome 43.0.2357.130 (64位)中体验过

Answer 3

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

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