How to place videos in a grid - html

Question

I want to create a video archive that would look something like
The videos take up 32% of the width each and have a gap of 50. The css code will also be below. My problem is that while I can make one row look like this, when I paste another row below it, it just all goes in the same row and the second group of 3 videos are squished together. I was wondering if there is a way that this can be fixed.
My current code for the videos is:
<div class="videos1">
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
</div>
My css code is:
.videos1 {
display: flex;
justify-content: space-around;
gap: 50;
}
.video1 {
width: 32%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Answer 1

Using CSS grid layout this should be quite strait forward.
Then use nth child to target certain rows for the shorter height in your example.
Here's an example from your code. For clarity, I've replaced the videos with just divs, but the concept is exactly the same.
.videos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
padding: 0.5rem;
border: 1px dashed blue;
}
.video {
min-height: 6rem;
border: 1px dashed red;
}
.video:nth-child(4n),
.video:nth-child(5n),
.video:nth-child(6n) {
min-height: 3rem;
border: 1px dashed orange;
}
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>

Answer 2

Explanation
You haven't close <div class="videos1">.
Solution
Add </div> at the end of the HTML code you posted and you will be ready to cope paste it as many times as you like.
<div class="videos1">
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
<div class="video1">
<iframe width="560" height="315" src="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div class="caption" style="color:#ffffff">
Coming Soon!
</div>
</div>
</div> <!-- here -->

Answer 3

You have to add flex-wrap: wrap, moreover gap: 50 doesnt have unities, you have to especify unities for example gap: 10px
Bonus
I also recommend using 'calc' when calculating the width, this way you don't have to use 'justify-content', you just have to calculate the space you want minus the 'gap' width: calc(33.33333% - 10px);
.videos1 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.video1 {
width: calc(33.33333% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color:#f1f1f1;
}