<svg>
	<defs>
		<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 341.4087,58.040727 0,951.927273 -112.60986,0 -66.8335,-432.74767 0,432.74767 -107.42188,0 0,-951.927273 107.42188,0 72.02149,428.631863 0,-428.631863 107.42187,0 z" />
			<path d="m 614.54102,58.040727 73.54737,951.927273 -131.53077,0 -6.40869,-171.09997 -46.08154,0 -7.6294,171.09997 -133.05664,0 65.30762,-951.927273 185.85205,0 z M 546.48682,670.11996 Q 536.72119,508.42756 526.95557,270.88672 507.42432,543.7059 502.54151,670.11996 l 43.94531,0 z" />
			<path d="m 934.6704,58.040727 0,190.503053 -76.29394,0 0,761.42422 -128.47902,0 0,-761.42422 -75.98874,0 0,-190.503053 280.7617,0 z" />
			<path d="m 1256.0205,58.040727 0,636.186103 q 0,108.18692 -3.6621,152.28484 -3.6621,43.50995 -21.6675,89.95977 -18.0054,45.86185 -47.6074,69.96876 -29.2969,23.5188 -69.2749,23.5188 -44.2505,0 -78.125,-28.2226 -33.8745,-28.2227 -50.65919,-73.49656 -16.78469,-45.27388 -19.83647,-95.25154 -3.0517,-50.56562 -3.0517,-211.67004 l 0,-563.277533 128.47906,0 0,713.798453 q 0,62.32507 3.3568,79.96425 3.6622,17.05119 14.3433,17.05119 12.207,0 15.564,-18.81512 3.6621,-19.40309 3.6621,-90.54774 l 0,-701.451033 128.479,0 z" />
			<path d="m 1305.7642,58.040727 90.9424,0 q 90.9423,0 122.9858,13.523364 32.3486,13.523365 52.4902,69.380729 20.4468,55.26941 20.4468,176.97969 0,111.12678 -14.3433,149.34498 -14.3432,38.21821 -56.4575,45.86185 38.147,18.22714 51.2696,48.80171 13.1225,30.57455 16.1743,56.44534 3.3569,25.28282 3.3569,140.5254 l 0,251.06421 -119.3237,0 0,-316.32915 q 0,-76.43641 -6.4087,-94.66354 -6.1035,-18.22715 -32.6538,-18.22715 l 0,429.21984 -128.479,0 0,-951.927273 z m 128.479,162.868343 0,211.67006 q 21.6674,0 30.2123,-11.17148 8.8502,-11.75945 8.8502,-74.67248 l 0,-52.32955 q 0,-45.27388 -8.545,-59.38521 -8.2397,-14.11134 -30.5175,-14.11134 z" />
			<path d="m 1642.6782,58.040727 214.2334,0 0,190.503053 -85.7544,0 0,180.50751 80.2613,0 0,181.09549 -80.2613,0 0,209.31816 94.2994,0 0,190.50306 -222.7784,0 0,-951.927273 z" />
		</clipPath>
	</defs>
</svg>

<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4 type="video/mp4">
	</video>
</div>

body {
	margin: 0;
}

svg {
	width: 0;
	height: 0;
	position: absolute;
}

.video-container {
	video {
		width: 100%;
		display: block;
		
		clip-path: url(#clip-00);
	}

	margin: 40px auto;

	outline: 1px solid #dadada;
	
	&:nth-of-type(1) {
		width: 25%;
	}
	
	&:nth-of-type(2) {
		width: 50%;
	}
	
	&:nth-of-type(3) {
		width: 75%;
	}
	
	&:nth-of-type(4) {
		width: 100%;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.