iframe or its container won't act in a relative way?

Question

I have two iframes on my webpage. Both at the bottom a flex-direction: column container. Both of those containers are in a flex-direction: row container.

I'm trying to achieve two paragraphs of text each above their corresponding iframe videos however I'm running into some tricky business with iframe.

My iframe is position: absolute; and my container is position: relative; however when I resize my viewport text in the same container and text out of the container all fall behind the iframe and become hidden.

in my mobile @media this works perfectly. The ext in class="quest-news" is bolted to the bottom of the iframe and moves down naturally as the iframe increases in size however in my tablet @media it hides its self behind the iframe or moves further and further down the page as I increase the viewport.

What's happening here?

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

Working fiddle: https://jsfiddle.net/9q25gx84/3/

What i did is to change styles for:

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

and also for the same class inside media query:

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

So we are using padding-bottom: 56%; only for small viewports to keep proper video ratio. For largest viewports there is no need for that because each video keep proper padding-bottom.