<iframe>未使用CSS网格（Chrome，Edge，Opera）中的可用空间，但可在Firefox上使用

Question

我有一个网站，该网站在弹出窗口中显示一些youtube视频。 在编写代码时，我使用Firefox测试了所有内容。它的行为与我在Firefox中的方式相同：弹出窗口的一半是视频，另一半是由div组成的。 Firefox屏幕截图

但是，如果我使用Chrome，Opera或Edge打开页面，则其行为如下：弹出窗口已正确划分，但YouTube iframe仅具有最小高度 Chrome屏幕截图。

我尝试使用iframe上的 height：100％对其进行修复。在Firefox中，它什么都没有改变，但在其他浏览器上，它使iframe网格面积大于我想要的大小

有人知道我如何在其他浏览器的Firefox中使它看起来像吗？

弹出窗口代码如下：

  

            

            

               // ...
            

            

               // ...
            
”

            

               // ...
            

            

                // ...
            

         
 

我的CSS是：

  .popup {
    背景：烟熏；
    z索引：1000；
    位置：固定；
    宽度：70％;
    底部：40px；
    顶部：40px；
    左：50％；
    转换：translate（-50％，0％）;
    显示：网格；
    grid-template-columns：50fr 50fr;
    grid-template-rows：60fr 24px 40fr;
    网格模板区域：“ iframe iframe”
                        “ tpop ipop”
                        “ kpop bpop”；
}

iframe {
    网格区域：iframe；
    宽度：100％;
}

#kpop {
    网格区域：kpop；
}

#bpop {
    网格区域：bpop；
}

#ipop {
    网格区域：ipop；
}


#tpop {
    网格区域：tpop；
}
 

Answer 1

也许您应该在选择器中的父元素上使用！important标记来覆盖iframe的属性。

看看：

body iframe {
    height: 100% !important;
}

Answer 2

尝试在 iframe 类中设置高度：60 vh 。

iframe {
    grid-area: iframe;
    width: 100%;
    height: 60vh;


}

下面是在各种浏览器中经过测试的输出。