How to get a dynamically reziable 2x2 mosaic of youtube videos?

Question

I'm trying to get a dynamically resizable 2x2 mosaic of YouTube videos, But I'm not able to get the CSS correct for the containers to adjust in a 2x2 fashion. They either don't rezise or they just get on top of each other.

This is what I have:

body {
  background-color: #404040;
  color: lightgrey;
}

div.container {
  max-width: 1130px;
  /*  width: 100%;*/
  border: 1px solid black;
}

div.container.mosaic {
  /*position: relative;     /* new */
  margin-bottom: 5em;
  padding: 2em;
}

.video {
  margin: 0 auto;
  text-align: left;
  padding: 0;
  width: 50%;
}


/* vc = video-container */

.vc {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 10px;
  height: 0;
  overflow: hidden;
}

.vc iframe {
  /* aspect-ratio: 16/9; /* NEW CSS:  16:9 Aspect Ratio */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>YT Mosaic</title>
  <link href="main.css" rel="stylesheet">
</head>

<body>

  <div class="container">
    <header>YouTube Mosaic</header>
    <h2>YouTube Containers</h2>

    <p>We want to create a dynamically resizable 2x2 mosaic of youtube videos...</p>

    <p>With just iframe's, they don't resize correctly.</p>

    <div class="mosaic">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>

    <hr>
    <p>With video-containers they end up stacked in a column and not in a row.</p>

    <div class="video">
      <div class="vc"><iframe width="560" height="315" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe></div>
      <div class="vc"><iframe width="560" height="315" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe></div>
    </div>

  </div>

</body>

<footer>Test Page Footer</footer>

</html>

Also I don't want the video containers to be larger than width="560" height="315".
There is also a new CSS for setting aspect ratio, as commented out.
I don't want any external dependencies.

How can I get a 2x2 mosaic to resize the containers with browser window, given these limits?

Some related but not applicable answers:

You can use a grid system and aspect ratio to size your cells and iframes : example https://codepen.io/gc-nomade/pen/jOxQGgN (added gap & borders, all videos into a single container to make it easy to test. with a max-height/width so it stands in the viewport and resizes itselves) — G-Cyrillus, Oct 10 '22 at 14:57
@G-Cyrillus That worked much better thank my own, and also simplified the code and CSS somewhat. Feel free to post as answer so I can accept. — not2qubit, Oct 10 '22 at 20:09

score 2 · Accepted Answer · answered Oct 11 '22 at 05:22

As commented, a possible option:

You can use a grid system and aspect ratio to size your cells and iframes : example codepen.io/gc-nomade/pen/jOxQGgN (added gap & borders, all videos into a single container to make it easy to test. with a max-height/width so it stands in the viewport and resize itselves)

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  margin: auto;
  gap: 1em;
}

iframe {
  width: 100%;
  height: 100%;
  display: block;
  background: yellow;
  border: solid red;
}

body {
  margin: 0;
  padding: 1em;
  height: 100vh;
  box-sizing: border-box;
}

<div class="mosaic ytb">
  <iframe src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
  <iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
  <iframe src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>
  <iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>

Ressources

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout / https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/gap (available for flex, grid and column CSS )

Thanks! I ended up having to put the `aspect-ratio: 16/9;` in the `iframe`, to make it work. The new code can be found in [this SO question](https://stackoverflow.com/questions/74023124/how-to-make-one-button-play-several-youtube-videos-in-embedded-iframes), including a run link. Also the "*fr = fractional unit and 1fr is for 1 part of the available space.*", didn't work well when using a 2x3 grid, so I had to change to `%`. — not2qubit, Oct 11 '22 at 12:24

How to get a dynamically reziable 2x2 mosaic of youtube videos?

1 Answers1