HTML5 Video Player Generator

<!--
	Video player.

	The attributes that decide whether it plays at all:
	  - autoplay works only when the video is muted. Every browser blocks a
	    sound-on autoplay, and the promise from play() rejects rather than throwing.
	  - playsinline stops iOS taking the video full screen. Without it, an autoplay
	    background video hijacks the whole screen on an iPhone.
	  - width and height are the file's own dimensions, and with the CSS below they
	    give the box an aspect ratio before the file loads.
-->
<div class="video-wrap">
	<video
		class="video"
		width="1920"
		height="1080"
		preload="metadata"
		poster="https://example.com/video/demo-poster.jpg"
		controls
		controlslist="nodownload"
		autoplay
		muted
		loop
		playsinline
	>
		<source src="https://example.com/video/demo.webm" type="video/webm" />
		<source src="https://example.com/video/demo.mp4" type="video/mp4" />
		<track
			kind="captions"
			src="https://example.com/video/demo-en.vtt"
			srclang="en"
			label="English"
			default
		/>
		<!--
			The fallback is for a browser that cannot play either source, which in
			practice means a very old one or a text browser. A link to the file is
			more use than a sentence saying the video cannot be played.
		-->
		<p>
			Your browser cannot play this video.
			<a href="https://example.com/video/demo.mp4">Download it instead</a>.
		</p>
	</video>
</div>

<style>
/*
	The aspect ratio comes from the attributes, so the box has its shape before the
	file arrives and the page does not jump. object-fit matters once the box is a
	different shape from the video.
*/
.video-wrap {
	aspect-ratio: 1920 / 1080;
	width: 100%;
	background: #000;
}

.video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
	Respect the reduced-motion preference. A looping background video is motion,
	and this is the one place a media query can honour that: the poster stays and
	the video is paused by the script below.
*/
@media (prefers-reduced-motion: reduce) {
	.video {
		/* The script pauses it; this keeps the poster visible if it is already playing. */
		object-fit: cover;
	}
}
</style>

<script>
/*
	Two lines of progressive enhancement: pause a decorative looping video for
	anyone who has asked for reduced motion. Without this, the CSS preference is
	respected everywhere except the one element that actually moves.
*/
if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
	document.querySelectorAll( 'video[autoplay][loop]' ).forEach( function ( video ) {
		video.removeAttribute( 'autoplay' );
		video.pause();
	} );
}
</script>