11

我在网页中插入了一个 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 列数。

4

4 回答 4

2

难以复制这个问题 - 观察

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

以下似乎并没有始终如一地解决问题：

  1. 我尝试<p>在文本周围放置标签，认为这可能是与行长相关的怪癖。

  2. 我尝试清除缓存。

  3. 更改列的宽度

  4. 更改 iframe 的尺寸

此外，首屏下方的视频似乎没有被渲染（绘制？）。

一次成功的案例

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

我不知道为什么会这样。

于 2013-04-04T11:51:32.360 回答
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 位）

于 2015-06-25T18:15:11.867 回答
1

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

注意：我使用的是<video>标签，而不是嵌入的<iframe>YouTube 视频。但是我对列有同样的问题。

于 2018-09-09T02:24:46.743 回答
0

我可以通过将 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 上放置了标签，而其他视频则获得了标签。

我想这与定位有关。调查它！

于 2015-02-26T16:30:07.207 回答