JSFiddle - React, Tailwind, and code Playground

HTML

<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
        <div class="video-container">
		    <video 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>
	<br />
            
            
	<div class="whatever-container" style="width:600px; height:200px; background-color:red;">
        <div class="video-container">
		    <video 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>

CSS

.whatever-container {
    position: relative;
}

.video-container {
    position: absolute;
    opacity: 0;
}

.video-container > video {
    position: relative;
    width: 100%;
    height: 100%;
}

JavaScript

/*
 * After the video dimentions have been acquired, its container will have
 * resized and we can adjust its position as necessary.
 */
function adjustVideoContainer() {
    console.log("video metadata loaded");
    var videoContainer = $(this).parent().filter(".video-container");

    if (videoContainer.length === 0) {
        //abort
        console.log(
            "adjustVideoContainer() was called but no it wasn't "+
            "wrapped in an appropriate container"
        );
        return;
    }
    var containerParent = videoContainer.parent();
    var parentWidth     = containerParent.width(),
        parentHeight    = containerParent.height(),
        containerWidth  = videoContainer.width(),
        containerHeight = videoContainer.height();

    if (containerWidth < parentWidth) {
        videoContainer.css(
            "left",
            (parentWidth - containerWidth) / 2
        );
    }

    if (containerHeight < parentHeight) {
        videoContainer.css(
            "top",
            (parentHeight - containerHeight) / 2
        );
    }
    else {
        videoContainer.height("100%");
    }
    videoContainer.css("opacity", 1);
    
}

$("video").on("loadedmetadata", adjustVideoContainer);