JSFiddle - React, Tailwind, and code Playground

by egkostin

HTML

<div class="container">
    <div class="video-container">
        <div class="youtube-video">
            <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/VaX9irsv6q8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    <div class="video-container">
        <div class="youtube-video">
            <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/VaX9irsv6q8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    <div class="video-container">
        <div class="youtube-video">
            <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/VaX9irsv6q8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
.video-container {
    flex-basis: calc(100% / 3);
    background: #999;
    padding: 20px;
}
.youtube-video {
    padding: 56.25% 0 0 0;
    position: relative;
}

@media (max-width: 960px) {
    .container {
        justify-content: flex-start;
    }
    .video-container {
        flex-basis: calc(100% / 2);
    }
}
@media (max-width: 740px) {
    .video-container {
        flex-basis: 100%;
    }
}