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

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

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

我试图修复它使用height: 100%的iframe中。在Firefox中，它什么都没有改变，但在其他浏览器上，它使iframe网格面积大于我想要的

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

弹出窗口代码如下所示：

         <div class="popup">
            <iframe src="https://www.youtube.com/embed/..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

            <div id="tpop">
               //...
            </div>

            <div id="ipop">
               //...
            </div>'

            <div id="kpop">
               //...
            </div>

            <div id="bpop">
                //...
            </div>

         </div>

而我的CSS是：

.popup {
    background: whitesmoke;
    z-index: 1000;
    position: fixed;
    width: 70%;
    bottom:40px;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0%);
    display: grid;
    grid-template-columns: 50fr 50fr;
    grid-template-rows: 60fr 24px 40fr;
    grid-template-areas: "iframe iframe"
                        "tpop ipop"
                        "kpop bpop";
}

iframe {
    grid-area: iframe;
    width: 100%;
}

#kpop {
    grid-area: kpop;
}

#bpop {
    grid-area: bpop;
}

#ipop {
    grid-area: ipop;
}


#tpop {
    grid-area: tpop;
}