How to embed four YouTube videos (16:9 responsive) in a 2x2 grid that can become a 1x4 grid depending on screen size?

I'm trying to embed four YouTube videos in an HTML page with limited real estate. Depending on screen size, I'd like to have them arranged in a 2x2 grid, but collapsible into a 1x4 grid should screen size not permit it. I'm also trying to make the video size responsive in a 16:9 aspect ratio, with minimum and maximum sizes.

The closest I got was using some code from researching the Web, and this site. However, whatever I find, I can't seem to achieve my entire goal. Either I'm able to have the grid 2x2 collapsible into a 1x4, but I lose the embed aspect ratio and margins. Or I can get a 1x4 grid only with margins, but the wider the screen gets, the more space there is in between the videos because of the padding-bottom: 56.25%. Here's my latest attempt :

.vid-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  }

.vid-cell {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 10px;
}

.vid-cell embed, iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    max-height: 315px;
    max-width: 560px;
}

<html>
<body>
<div class="vid-container">
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid1"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid2"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid3"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid4"></iframe></div>
</div>
</body>
</html>

Solution

Is this the kind of effect you want? If not, please edit your question to make your requirements clearer.

(The code is shown below. I created a test page rather than a snippet because YouTube embeds don’t work properly in a snippet.)

<!doctype html>
<html>
<head>
<style>
body {
  margin: 1em;
}
.vid-container {
  display: grid;
  grid-template-columns: auto;
  gap: 1em;
}
@media (min-width: 1000px) {
  .vid-container {
    grid-template-columns: 1fr 1fr;
  }
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>
</head>
<body>
<div class="vid-container">
<iframe src="https://www.youtube.com/embed/NXN33_E-R3k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5gMa8Fcgoc4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/2-BMxNC8cD8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/xmeS2CTGSgs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</body>
</html>