<iframe> не использует доступное пространство в сетке CSS (Chrome, Edge, Opera), но работает в Firefox

Question

У меня есть веб-сайт, который отображает видео с YouTube во всплывающем окне.Я тестировал все, используя Firefox при написании кода.И он ведет себя так, как я хочу в Firefox: половина всплывающего окна - это видео, другая половина - из элементов div. Скриншот Firefox

Но если я открываю страницу с помощью Chrome, Opera или Edge, она ведет себя так: всплывающее окно делится правильно, но у фрейма YouTube только минимальная высота Скриншот 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;
}

Answer 1

Попробуйте установить высоту: 60 vh в iframe class.

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


}

Ниже приведены результаты тестирования в различных браузерах.

Answer 2

Возможно, вам следует использовать тег! Important на родительском элементе в селекторе, чтобы переопределить свойства iframe.

Взгляните:

body iframe {
    height: 100% !important;
}