iframe или его контейнер не будут действовать относительно?

Question

У меня есть два фрейма на моей веб-странице. Оба внизу flex-direction: контейнер колонны. Оба этих контейнера находятся в гибком направлении: контейнер строки.

Я пытаюсь создать два абзаца текста, каждый над соответствующими видеофрагментами iframe, однако я сталкиваюсь с некоторыми хитрыми делами с iframe.

Мой iframe - это позиция: абсолютная; и мой контейнер - позиция: относительная; однако, когда я изменяю размер моего окна просмотра в том же контейнере, и текст из контейнера все отстает от iframe и становится скрытым.

в моем мобильном @media это работает отлично. Ext в class = "quest-news" прикреплен к нижней части iframe и естественным образом перемещается по мере увеличения размера iframe, однако в моем планшете @media он прячется за iframe или перемещается все дальше и дальше вниз по странице как Я увеличиваю область просмотра.

Что здесь происходит?

HTML:

    <main>
      <div class="chan-content">
        <div class="column">
          <div class="column-text">
            <h3 id="hide">Bla bla bla</h3>
            <p id="hide" class="col-p-shift">
              Bla bla bla
            </p>
          </div>
          <div class="vid-contain vid-anim">
            <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
        <div class="column">
          <div class="column-text">
            <h3 id="hide">Bla bla bla</h3>
            <p id="hide" class="col-p-shift">
              Bla bla bla
            </p>
          </div>
          <div id="hide" class="vid-contain vid-anim">
            <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
      </div>
      <div class="quest-news">
        <h1 class="text-style">Common Questions</h1>
      </div>
    </main>

CSS:

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

header  {
  grid-area: header;
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0 15px 0;
  font-size: 1.3em;
}

main  {
  grid-area: main;
}

advert  {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.title  {
  font-size: 3em;
}

.title-shift  {
  margin: 90px 0 0 0;
}

.title-shift-h3  {
  transform: translate(0, -25px)
}

.title-shift-p  {
  transform: translate(0, 15px)
}

.text-style  {
  background: -webkit-linear-gradient(80deg, white, #AEC6DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.channel  {
  display: flex;
  justify-content: space-evenly;
  font-size: 1em;
}

.chan-img  {
  width: 160px;
  height: 40px;
  border-radius: 5px;
  transition: 1s;
}

.chan-img:hover  {
  transform: scale(1.1);
  transition: 1s;
}

.chan-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
  margin: 8px 0 0 0;
}

iframe  {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

#hide  {
  display: none;
}

@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    .channel  {
      justify-content: center;
      align-content: center;
    }

    .chan-text  {
      transform: translate(0, 18px);
      margin: 0 20px 0 40px;
    }

    .chan-content  {
      display: flex;
      position: relative;
      flex: 0 1 auto;
      width: 100%;
    }

    .column  {
      display: flex;
      flex-direction: column;
      margin: 0 10px 0;
      width: 50%;
    }

    .vid-contain  {
      position: relative;
      overflow: hidden;
      padding-bottom: 56%;
    }

    .column-text  {
      min-height: 320px;
    }

    #hide  {
      display: block;
    }

    .vid-anim  {
      animation-name: opacity;
      animation-duration: 6s;
    }

  }

Answer 1

Рабочая скрипка: https://jsfiddle.net/9q25gx84/3/

То, что я сделал, это изменил стили для:

.chan-content {
  position: relative;
  width: 100%;
  margin: 8px 0 0 0;
  display: flex;
  padding-bottom: 56%;
}

, а также для того же класса внутри медиа-запроса:

.chan-content  {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    padding-bottom: 0;
 }

Таким образом, мы используем padding-bottom: 56%; только для небольших окон просмотра, чтобы сохранить правильное соотношение видео.Для больших окон просмотра это не нужно, потому что каждое видео имеет правильный отступ.