JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div class="col box container">
	<div class="media-player video box-shrink">
		<video controls>
		  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
		</video>
	</div>
	<div class="media-player video box-shrink">
		<video controls>
		  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
		</video>
	</div>
	<div class="media-player video box-shrink">
		<video controls>
		  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
		</video>
	</div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
.container { height: 80vh; width: 80vw; margin: 8px; border: 2px solid #000; }
.col { display: flex; flex-direction: column; justify-content: space-between; }
.box { flex-basis: auto; }

.box-shrink { 
	flex: 1 1 auto; height: 32px; margin: 4px;
	border: 2px solid #00f; 
}
video { 
	max-height: 100%; max-width: 100%; 
	display: block; margin: 0px auto; border: 2px solid #f00; 
}