iframe异常显示在Chrome上（在Firefox上正常）

Question

在my page上，顶级中心嵌入式YouTube视频（iframe）会在Firefox上填充整个响应式容器，但出于某种原因，它显示的内容要小得多，而且只在Chrome的容器的上半部分显示：

HTML：

<div class='product_frame_wrap'>
    <div class='product_frame'>
        <div class='product_frame_image_vid'>
            <iframe>...</iframe>
        </div>
    </div>
</div>

CSS：

.product_frame_wrap {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    width: 100%;
}
.product_frame {
    background: rgba(0, 0, 0, 0) url("images/frame.png") no-repeat scroll 50% 50% / contain ;
    padding-bottom: 75%;
    position: relative;
}
.product_frame_image_vid {
    bottom: 0;
    left: 0;
    padding-top: 5%;
    position: absolute;
    right: 0;
    top: 0;
}
.product_frame_image_vid iframe {
    height: 100% !important;
    width: 100% !important;
}

Answer 1

如果你查找浏览器特定的CSS，你可以找到hacks。以下代码仅影响Chrome浏览器。当您将iframe的高度设置为200％时，它似乎在chrome中正确填充。

将以下代码段添加到您的css应该可以解决问题：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .product_frame_image_vid iframe { height:200%; } 
}