视频iframe响应大小的Chrome问题打破了网站

Question

我有这个页面 - http://tomaspetrecek.cz。我们有youtube通过iframe封装了视频，这些视频是用DIV容器包装的。就像bootstrap一样。

但是在Chrome中网站很奇怪，侧边栏菜单与网站背景相关。仅限Chrome，仅限主页。

我发现，当我从youtube视频的iframe中删除css宽度/高度时，页面就可以了。

我试图通过脚本删除脚本来解决这个问题，但可能有一些不好的组合。我尝试使用非youtube iframe的不同div并且它正常工作，此问题仅在iframe的内容为html5 youtube播放器时显示。

视频响应式容器的HTML外观：

<div class="video-container">
    <iframe src="//www.youtube.com/embed/Yjtt5bdLPHk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>

和CSS看起来：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px; 
    margin: 10px 25px;
    height: 0; 
    overflow: hidden;
}

.video-container > iframe,
.video-container > object,
.video-container > embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

提前感谢您的帮助！

PS：对不起我的英语，它不是我的母语。