谷歌浏览器问题在嵌入视频时隐藏溢出(youtube / vimeo)

Question

我在谷歌浏览器上遇到了一个奇怪的问题，这似乎是新的，因为我很确定它以前(在旧版本上)有效。

.container {
width: 400px;
height: 266px;
overflow: hidden;
position: relative;
border: 2px solid red;
margin-bottom: 30px;
}
iframe {
position: absolute;
width: 480px; 
height: 350px; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);
z-index: -1;
overflow:hidden;
}

<div class="container">
<iframe src="https://www.youtube.com/embed/Bm8N_pf7LuU" frameborder="0"></iframe>
</div>
<div class="container">
<iframe src="https://codepen.io/" frameborder="0"</iframe>
</div>

你会看到第一个容器包含一个youtube iframe并且比容器大，但是使用overflow：hidden 它不应该在网站上可见和"剪切"。 但是谷歌浏览器无法再这样做了(所有其他浏览器都可以正常工作)。 第二个容器只包含一个普通页面，隐藏的溢出效果很好，所以我想它与视频嵌入有某种关系(vimeo 嵌入 = 同样的问题)。 这似乎是他们网站上的错误。

您对此有什么解决方法吗？

Answer 1

Chrome 溢出问题已解决。谷歌修复了它

Answer 2

我今天将我的谷歌浏览器更新到版本 66.0.3359.117 并且该错误已解决。

JSFIDDLE 与您的示例