User:Emilio/VideoHero.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

const VideoHero = {

	init( $content ) {
		$content.find( '.main-page-video-hero[data-video-src]' ).each( function () {

			const hero = this;
			const src = hero.dataset.videoSrc;

			const video = document.createElement( 'video' );

			video.autoplay = true;
			video.loop = true;
			video.muted = true;
			video.defaultMuted = true;
			video.playsInline = true;
			video.preload = 'auto';

			video.setAttribute( 'autoplay', '' );
			video.setAttribute( 'loop', '' );
			video.setAttribute( 'muted', '' );
			video.setAttribute( 'playsinline', '' );

			video.src = src;

			Object.assign( video.style, {
				position: 'absolute',
				inset: '0',
				width: '100%',
				height: '100%',
				objectFit: 'cover',
				objectPosition: 'center center',
				zIndex: '1'
			} );

			hero.prepend( video );

			video.play().catch( function ( error ) {
				console.warn( 'Hero autoplay failed:', error );
			} );
		} );
	}
};

mw.hook( 'wikipage.content' ).add( VideoHero.init );