YouTube Auto-play and Full Height Background Videos

With the recent updates in Firefox and Chrome, auto-playing YouTube/Vimeo videos have been disabled. If you check your console (I use Firefox), you will see a warning: Feature Policy: Skipping unsupported feature name “autoplay”. Even following Google’s guidelines with adding a ?autoplay=1 to your video URL does not work. Which completely throws out YouTube videos as background videos for your website…

Unless you use the YouTube API system with a bit of javascript thrown in. Thanks to YouTube, they provided a working solution to autoplaying a youtube video. We will tweak it slightly to auto-play and loop!

Remember to change the videoId to your video ID.

With some added CSS and a non-interactive layer, we have a full with/height background player:

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div class="yt-cover"></div>
<div id="yt-wrap" style="z-index: -99;"></div>


<script>
	/* 2. This code loads the IFrame Player API code asynchronously. */
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	/* 3. This function creates an <iframe> (and YouTube player) */
	/* after the API code downloads. */
	var player;
	var height = window.screen.availHeight;
	var width = height * (16/9);
	var videoContainer = document.getElementById('yt-wrap');
	videoContainer.style.left = width/2;

	function onYouTubeIframeAPIReady() {
		console.log("New Video");
		player = new YT.Player('yt-wrap', {
			width: width,
			height: height,
videoId: 'u7w778zMWZw', // <--- Change this to your video ID
playerVars: {
	'autoplay': 1,
	'showinfo': 0,
	'autohide': 1,
	'loop': 1,
	'controls': 0,
	modestbranding: 1,
	vq: 'highres'
},
events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
}
});
	}

	/* 4. The API will call this function when the video player is ready. */
	function onPlayerReady(event) {
		player.playVideo();
		event.target.mute();
		player.mute();
		player.setVolume(0);
	}

	/* 5. The API calls this function when the player's state changes. */
	/* The function indicates that when playing a video (state=1), */
	/* the player should play for six seconds and then stop. */
	function onPlayerStateChange(event) {
		if (event.data == YT.PlayerState.ENDED) {
			player.seekTo(0);
			player.playVideo();
			player.mute();
			player.setVolume(0);
		}
	}
	function stopVideo() {
		player.stopVideo();
	}

</script>
<style>
	.yt-cover{
		position: absolute;
		top: 0;
		bottom:0;
		right:0;
		left:0;
		z-index:1000;
	}
</style>

The only other suggest I would add is to load the video after the page has loaded to help give the appearance of a faster loading website. Depends on your use case.