JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
	<div id="inner">
		<video controls>
			<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
			<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"/>
		</video>
		<div id="close">X<div>
	</div>
</div>

CSS

#parent{
			position: fixed;
			left: 20px;  top: 0;
			height: 100%;  width: 600px;
			max-width: 100%;  max-width: calc(100% - 40px);
			background-color: gray;
			display: flex;
			align-items: center;  justify-content:center;
		}
		#parent > div {
			position: relative;
			border: 10px solid white;
			background-color:blue;
			margin: 30px;
		}
		#parent video {
			display: block;
			object-fit: contain;
			max-height: calc(100vh - 80px);
			max-width: 100%;
			width: 100%; /* needed by IE and older browsers (e.g. FireFox 21) */
		}
		@supports(display:flex){ /* all newer browser (but not IE 11 & IE 10, which new flex but not @supports) */
			#parent video {
				width: auto; /* needed by Chrome, Safari and new Opera (while FireFox and Edge are also fine with width:100%) */
			}
		}
		#parent div#close {
			position: absolute;
			right: -17px;  top: -17px;  width: 20px; height: 20px;
			border: 1px solid gray;  border-radius: 100%;  background-color: white;
		}


		/* additional styling for older browsers not supporting flexbox */
		#parent {
			text-align:center;
			white-space:nowrap;
		}
		#parent::after {
			display:inline-block;
			vertical-align:middle;
			content:" ";
			height:100%; width:0;
		}
		#parent > div {
			display:inline-block;
			vertical-align:middle;
		}
		html[data-useragent*='Presto'] #parent,
		html[data-useragent*='MSIE 10.0'] #parent {
			display:block; /* IE10 and old Opera have a broken flexbox implementation */
		}

JavaScript

document.documentElement.setAttribute('data-useragent', navigator.userAgent);