JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video1">
		<video data-video-width="320" data-video-height="240" controls>
		  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
		  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
		</video>
	</div>

	<div id="video2">
		<video data-video-width="320" data-video-height="240" controls>
		  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
		  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
		</video>
	</div>
            
    <div id="video3">
		<video data-video-width="320" data-video-height="240" controls>
		  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
		  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
		</video>
	</div>

SCSS

div {
    position: relative;
    margin-bottom: 25px;
    background-color: red;
    
    &#video1 {
        width: 200px;
        height: 600px;
    }
    &#video2 {
        width: 600px;
        height: 200px;
    }
    &#video3 {
        width: 50%;
        height: 200px;
    }
}

video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
}

JavaScript

var scaleVideo = function scaleVideo() {
    var $this            = $(this),
        $parentContainer = $this.parent(),
        parentWidth      = $parentContainer.width(),
        parentHeight     = $parentContainer.height(),
        parentRatio      = parentWidth / parentHeight,
        videoRatio       = parseInt($this.data('video-width'), 10) / parseInt($this.data('video-height'), 10),
        newWidth,
        newHeight;
    
    // if our video is wider than (or equally wide to) its container,
    // make it just as wide and calculate the height via the aspect ratio
    if (parentRatio - videoRatio <= 0) {
        newWidth = parentWidth;
        newHeight = parseInt(newWidth / videoRatio, 10);
    
    // if our video is taller than its container, make it just
    // make it just as tall and calculate the width via the aspect ratio
    } else {
        newHeight = parentHeight;
        newWidth  = parseInt(newHeight * videoRatio, 10);
    }
    
    $this.css({width: newWidth, height: newHeight});
};

// calculate the initial size on load
$('video').each(function(idx, video) {
    scaleVideo.call(video);
});

// if your video containers are not fixed in size, listen for 
// resize events to rescale the videos as required. Otherwise 
// remove this event handler

$(window).on('resize', function() {
   $('video').each(function(idx, video) {
       scaleVideo.call(video);
   });
});