使用 css 'column-count' 时嵌入 youtube 的错误
Posted
技术标签:
【中文标题】使用 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 【参考方案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>
<body>
<article class="display-2col">
<p>Text</p>
<p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&autoplay=0&wmode=opaque&controls=0&showinfo=0" 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“答案”类别。以上是关于使用 css 'column-count' 时嵌入 youtube 的错误的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS column-count 并不能仅平衡 Chrome 中的内容
瀑布流布局使用column-count内容被截断一半上面一半下面