<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>
		<clipPath id="clip-01" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 341.4087,0.57038152 0,1084.09241848 -112.60986,0 -66.8335,-492.83018 0,492.83018 -107.42188,0 0,-1084.09241848 107.42188,0 72.02149,488.14289848 0,-488.14289848 107.42187,0 z" />
			<path d="M 614.54102,0.57038152 688.08839,1084.6628 l -131.53077,0 -6.40869,-194.85544 -46.08154,0 -7.6294,194.85544 -133.05664,0 65.30762,-1084.09241848 185.85205,0 z M 546.48682,697.63039 Q 536.72119,513.4887 526.95557,242.96781 507.42432,553.66506 502.54151,697.63039 l 43.94531,0 z" />
			<path d="m 934.6704,0.57038152 0,216.95239848 -76.29394,0 0,867.14002 -128.47902,0 0,-867.14002 -75.98874,0 0,-216.95239848 280.7617,0 z" />
			<path d="m 1256.0205,0.57038152 0,724.51385848 q 0,123.20754 -3.6621,173.428 -3.6621,49.55085 -21.6675,102.44976 -18.0054,52.2293 -47.6074,79.6832 -29.2969,26.7841 -69.2749,26.7841 -44.2505,0 -78.125,-32.141 -33.8745,-32.1411 -50.65919,-83.7008 -16.78469,-51.55968 -19.83647,-108.47621 -3.0517,-57.58613 -3.0517,-241.0582 l 0,-641.48270848 128.47906,0 0,812.90186848 q 0,70.97826 3.3568,91.06645 3.6622,19.41857 14.3433,19.41857 12.207,0 15.564,-21.4274 3.6621,-22.09701 3.6621,-103.11934 l 0,-798.84014848 128.479,0 z" />
			<path d="m 1305.7642,0.57038152 90.9424,0 q 90.9423,0 122.9858,15.40094148 32.3486,15.400942 52.4902,79.013514 20.4468,62.942983 20.4468,201.551463 0,126.55557 -14.3433,170.07996 -14.3432,43.52441 -56.4575,52.22929 38.147,20.75778 51.2696,55.57731 13.1225,34.81951 16.1743,64.28219 3.3569,28.79307 3.3569,160.03587 l 0,285.92188 -119.3237,0 0,-360.24817 q 0,-87.0488 -6.4087,-107.80658 -6.1035,-20.7578 -32.6538,-20.7578 l 0,488.81255 -128.479,0 0,-1084.09241848 z m 128.479,185.48089848 0,241.05823 q 21.6674,0 30.2123,-12.72252 8.8502,-13.39213 8.8502,-85.03997 l 0,-59.59496 q 0,-51.55968 -8.545,-67.63022 -8.2397,-16.07056 -30.5175,-16.07056 z" />
			<path d="m 1642.6782,0.57038152 214.2334,0 0,216.95239848 -85.7544,0 0,205.56909 80.2613,0 0,206.23869 -80.2613,0 0,238.37979 94.2994,0 0,216.95245 -222.7784,0 0,-1084.09241848 z" />
		</clipPath>
		<clipPath id="clip-02" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="M 0 0 L 0 1080 L 1920 1080 L 1920 0 L 0 0 z M 54.542969 58.041016 L 161.96484 58.041016 L 233.98633 486.67188 L 233.98633 58.041016 L 341.4082 58.041016 L 341.4082 1009.9688 L 228.79883 1009.9688 L 161.96484 577.2207 L 161.96484 1009.9688 L 54.542969 1009.9688 L 54.542969 58.041016 z M 428.68945 58.041016 L 614.54102 58.041016 L 688.08789 1009.9688 L 556.55859 1009.9688 L 550.14844 838.86719 L 504.06836 838.86719 L 496.4375 1009.9688 L 363.38086 1009.9688 L 428.68945 58.041016 z M 653.9082 58.041016 L 934.66992 58.041016 L 934.66992 248.54297 L 858.37695 248.54297 L 858.37695 1009.9688 L 729.89648 1009.9688 L 729.89648 248.54297 L 653.9082 248.54297 L 653.9082 58.041016 z M 962.13672 58.041016 L 1090.6152 58.041016 L 1090.6152 771.83984 C 1090.6152 813.38989 1091.7348 840.04328 1093.9727 851.80273 C 1096.4141 863.17019 1101.1937 868.85547 1108.3145 868.85547 C 1116.4525 868.85547 1121.6409 862.58248 1123.8789 850.03906 C 1126.3203 837.10367 1127.541 806.92195 1127.541 759.49219 L 1127.541 58.041016 L 1256.0195 58.041016 L 1256.0195 694.22656 C 1256.0195 766.35118 1254.8008 817.11311 1252.3594 846.51172 C 1249.918 875.51835 1242.695 905.50416 1230.6914 936.4707 C 1218.6878 967.04527 1202.8187 990.36818 1183.084 1006.4395 C 1163.5527 1022.1187 1140.4606 1029.959 1113.8086 1029.959 C 1084.3083 1029.959 1058.2666 1020.5514 1035.6836 1001.7363 C 1013.1006 982.92119 996.21323 958.42281 985.02344 928.24023 C 973.83364 898.05765 967.22202 866.30672 965.1875 832.98828 C 963.15303 799.27787 962.13672 728.72131 962.13672 621.31836 L 962.13672 58.041016 z M 1305.7637 58.041016 L 1396.707 58.041016 C 1457.3352 58.041016 1498.331 62.548877 1519.6934 71.564453 C 1541.2591 80.58003 1558.7539 103.70707 1572.1816 140.94531 C 1585.8128 177.79159 1592.6289 236.78364 1592.6289 317.92383 C 1592.6289 392.00835 1587.8474 441.79073 1578.2852 467.26953 C 1568.723 492.74834 1549.9043 508.0351 1521.8281 513.13086 C 1547.2595 525.28229 1564.3493 541.55055 1573.0977 561.93359 C 1581.846 582.31663 1587.2389 601.13171 1589.2734 618.37891 C 1591.5114 635.23412 1592.6289 682.07591 1592.6289 758.9043 L 1592.6289 1009.9688 L 1473.3066 1009.9688 L 1473.3066 693.63867 C 1473.3066 642.68107 1471.169 611.12603 1466.8965 598.97461 C 1462.8275 586.82318 1451.9443 580.74805 1434.2441 580.74805 L 1434.2441 1009.9688 L 1305.7637 1009.9688 L 1305.7637 58.041016 z M 1642.6777 58.041016 L 1856.9121 58.041016 L 1856.9121 248.54297 L 1771.1562 248.54297 L 1771.1562 429.05078 L 1851.418 429.05078 L 1851.418 610.14648 L 1771.1562 610.14648 L 1771.1562 819.46484 L 1865.457 819.46484 L 1865.457 1009.9688 L 1642.6777 1009.9688 L 1642.6777 58.041016 z M 1434.2441 220.9082 L 1434.2441 432.58008 C 1448.6891 432.58008 1458.7585 428.85586 1464.4551 421.4082 C 1470.3552 413.56857 1473.3066 388.6764 1473.3066 346.73438 L 1473.3066 294.40625 C 1473.3066 264.22366 1470.4564 244.42708 1464.7598 235.01953 C 1459.2666 225.61197 1449.096 220.9082 1434.2441 220.9082 z M 526.95508 270.88672 C 513.93424 452.76617 505.79622 585.8431 502.54102 670.11914 L 546.48633 670.11914 C 539.97591 562.32421 533.46549 429.24728 526.95508 270.88672 z" />
		</clipPath>
		<clipPath id="clip-03" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 286.89969,-48.196686 0,1179.620386 -122.53281,0 -72.722725,-536.25736 0,536.25736 -116.887671,0 0,-1179.620386 116.887671,0 78.367875,531.157026 0,-531.157026 116.88766,0 z" />
			<path d="m 584.09985,-48.196686 80.02821,1179.620386 -143.12098,0 -6.97341,-212.02571 -50.14215,0 -8.30169,212.02571 -144.78131,0 71.06239,-1179.620386 202.22894,0 z M 510.04886,710.28679 Q 499.4227,509.91892 488.79656,215.5603 467.54425,553.63553 462.23118,710.28679 l 47.81768,0 z" />
			<path d="m 932.43836,-48.196686 0,236.069786 -83.0168,0 0,943.5506 -139.80032,0 0,-943.5506 -82.68471,0 0,-236.069786 305.50183,0 z" />
			<path d="m 1282.1052,-48.196686 0,788.356496 q 0,134.06433 -3.9848,188.71011 -3.9848,53.91717 -23.5768,111.47738 -19.592,56.8317 -51.8025,86.7048 -31.8785,29.1442 -75.3793,29.1442 -48.1497,0 -85.0092,-34.9732 -36.8594,-34.9733 -55.12314,-91.0763 -18.26372,-56.10303 -21.58442,-118.03493 -3.32061,-62.66049 -3.32061,-262.29974 l 0,-698.008816 139.80037,0 0,884.533076 q 0,77.23271 3.6526,99.09103 3.9849,21.1297 15.6072,21.1297 13.2826,0 16.9355,-23.31554 3.9848,-24.04415 3.9848,-112.206 l 0,-869.232266 139.8003,0 z" />
			<path d="m 1336.2322,-48.196686 98.956,0 q 98.956,0 133.8231,16.75804 35.1991,16.758041 57.1155,85.976019 22.2485,68.489387 22.2485,219.311757 0,137.70738 -15.6072,185.06705 -15.6071,47.35969 -61.4324,56.83162 41.5084,22.58691 55.7874,60.47467 14.2788,37.88773 17.5995,69.9466 3.6527,31.33025 3.6527,174.13789 l 0,311.11674 -129.8382,0 0,-391.9925 q 0,-94.71936 -6.9734,-117.30627 -6.6414,-22.58694 -35.5312,-22.58694 l 0,531.88571 -139.8003,0 0,-1179.620386 z m 139.8003,201.825086 0,262.29978 q 23.5767,0 32.8745,-13.84361 9.6301,-14.57221 9.6301,-92.53351 l 0,-64.84634 q 0,-56.10301 -9.298,-73.58966 -8.9658,-17.48666 -33.2066,-17.48666 z" />
			<path d="m 1702.8343,-48.196686 233.1112,0 0,236.069786 -93.3109,0 0,223.68341 87.3338,0 0,224.41201 -87.3338,0 0,259.38532 102.6089,0 0,236.06986 -242.4092,0 0,-1179.620386 z" />
		</clipPath>
		<clipPath id="clip-04" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 627.19098,-2.268656 0,532.305926 -245.24327,0 -145.5509,-241.98713 0,241.98713 -233.9447844,0 0,-532.305926 233.9447844,0 156.84938,239.685626 0,-239.685626 233.94479,0 z" />
			<path d="m 1224.0372,-2.268656 160.1724,532.305926 -286.4495,0 -13.9569,-95.67698 -100.35699,0 -16.61542,95.67698 -289.77253,0 142.22781,-532.305926 404.75113,0 z M 1075.8278,339.99846 q -21.2677,-90.41638 -42.5354,-223.24628 -42.53542,152.55711 -53.16928,223.24628 l 95.70468,0 z" />
			<path d="m 1921.2192,-2.268656 0,106.526946 -166.1539,0 0,425.77898 -279.8033,0 0,-425.77898 -165.4894,0 0,-106.526946 611.4466,0 z" />
			<path d="m 626.31123,527.76119 0,396.14546 q 0,67.36674 -7.85117,94.82595 -7.85151,27.0931 -46.45387,56.0169 -38.60271,28.5576 -102.06762,43.5687 -62.81074,14.6449 -148.52115,14.6449 -94.87062,0 -167.49541,-17.5739 Q 81.297021,1097.8153 45.311615,1069.6238 9.326243,1041.4323 2.7833949,1010.3118 -3.759281,978.82519 -3.759281,878.50736 l 0,-350.74617 275.451591,0 0,444.4737 q 0,38.80911 7.19665,49.79281 7.85151,10.6176 30.75119,10.6176 26.17126,0 33.36825,-11.716 7.85151,-12.082 7.85151,-56.38296 l 0,-436.78515 275.45132,0 z" />
			<path d="m 676.95878,527.76119 232.02431,0 q 232.02391,0 313.77741,8.42084 82.5316,8.42084 133.9198,43.20255 52.1666,34.4156 52.1666,110.20313 0,69.19731 -36.5945,92.99533 -36.5945,23.79802 -144.0421,28.55762 97.3256,11.34983 130.8059,30.38824 33.4797,19.03841 41.2661,35.14784 8.5646,15.74331 8.5646,87.50348 l 0,156.33468 -304.4344,0 0,-196.97437 q 0,-47.59604 -16.3506,-58.94585 -15.5722,-11.34983 -83.3106,-11.34983 l 0,267.27005 -327.79252,0 0,-592.75371 z m 327.79252,101.41617 0,131.80441 q 55.2807,0 77.0814,-6.95635 22.5798,-7.32247 22.5798,-46.49766 l 0,-32.58498 q 0,-28.1915 -21.8012,-36.97846 -21.022,-8.78696 -77.86,-8.78696 z" />
			<path d="m 1475.2826,527.76119 459.3039,0 0,118.62397 -183.8522,0 0,112.39986 172.0753,0 0,112.766 -172.0753,0 0,130.33988 202.1723,0 0,118.624 -477.624,0 0,-592.75371 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>
<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);
	}
	
	&:nth-of-type(1) {
		background: #c6c7c5;
	}
	&:nth-of-type(2) {
		background: #dcf3ff;
	}
	&:nth-of-type(3) {
		background: #a2d2df;
	}
	&:nth-of-type(4) {
		background: #406e8d;
	}
	&:nth-of-type(5) {
		background: linear-gradient(180deg, #bdc3c2, #2d5d89);
	}
}
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.