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

【问题标题】：Bug with youtube embed when using css 'column-count'使用 css 'column-count' 时嵌入 youtube 的错误
【发布时间】：2013-03-26 08:22:31
【问题描述】：

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

【问题讨论】：

我也有同样的问题，不仅是 Chrome，Safari 也有。如果 iframe 是内容的最后一部分，Safari 似乎会将 iframe 移动到列下方。有时会渲染/有时不会。 Firefox 似乎可以毫无问题地渲染。
因为这对我来说是个问题，我找不到任何其他的提示或解决方案，除了上述之外，我在 Safari 中也有问题。如果左栏内容小于 iframe 的高度，则 iframe 视觉效果会跳到栏下方（只有视觉效果，而不是实际内容：您仍然可以单击它所在的视频）。看到这个小提琴：jsfiddle.net/KTvCV/726
您找到解决方案了吗？我有同样的问题。谢谢
如果您不太在意性能和使用一些 JS hack，我设法通过为 iframe 设置样式属性来触发正确定位。例如。通过 Javascript 将其宽度设置为当前宽度，请参见此处：jsfiddle.net/pnds97m2

标签： css google-chrome youtube

【解决方案1】：

难以复制这个问题 - 观察

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

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

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

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

一次成功的案例

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

我不知道为什么会这样。

【讨论】：

我可以确认同样的事情。该视频仅在第一列时有效。我尝试添加 z-index，我可以看到视频，但无法点击播放。

【解决方案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 位）

【讨论】：

看起来你只需要一个width（以像素为单位）。不幸的是，仍然不允许我将响应式嵌入与列结合起来。

【解决方案3】：

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

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

【讨论】：

也为我工作。在我更新到 Chrome 版本 96.0.4664.45 (Official Build) (64-bit) 的同一天找到了你的答案！

【解决方案4】：

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

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

【讨论】：

那么您是在回答，说存在问题吗？虽然这可能是有价值的信息，但我怀疑它是否适合 SO“答案”类别。