Изменение размера iframe с отступом изменяет размер фонового изображения

Question

Мой iframe - идеальный размер, каким он отображается, но padding-bottom кажется единственным способом сделать его высоту пропорционально правильной ширине.Когда я использую padding-bottom, мое фоновое изображение также выглядит больше.Я хочу, чтобы фоновое изображение занимало 75% высоты экрана.

Я добавил фоновое изображение:

.showcase{
    background: #000 url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'img/teun cf 2019.jpg') ?>) no-repeat left top;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.showcase img {
    flex-shrink: 0;
    max-width: 100%;
    max-height: 75%;            
}

и некоторые модификации для iframe:

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

Тогда вот как этот iframe интегрирован в мой html-файл:

<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="https://www.youtube.com/embed/f2svCLTf1u4?start=15"></iframe>
</div>

Для справки, вот как выглядит страница: http://www.teunbuwalda.nl/the-neighbours/

Что связывает это padding-bottomв .iframe-embed-responsive-16by9 с моим фоновым изображением?