JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="videos">
    <div class="video_wrapper">
        <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
    </div>
    <div class="video_wrapper">
        <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
    </div>
</div>

CSS

body, html {
    height: 100%;
}
#videos {
    position: relative;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
    height: 100%;
    display: inline-block;
    position:relative;
    border:1px solid blue;
}
.video_wrapper:after {
    content:"";
    background:rgba(255, 0, 0, 0.25);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.video {
    max-height:100%;
    width: auto;
}

JavaScript

$(window).resize(function () {
    $('.video_wrapper').hide().show(0);
});