That Website Is Me
Cropped Twimlogo.png
That Website Is Me

YouTube Autoplay and Full Height Background Videos 2020

YouTube Autoplay and Full Height Background Videos 2020

With the recent updates in Firefox and Chrome, autoplaying 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 autoplay!

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:

<div style="position: fixed; z-index: -98; width: 100%; height: 100%"></div>
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_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;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'dQw4w9WgXcQ',
playerVars: {
'autoplay': 1,
'showinfo': 0,
'autohide': 1,
'loop': 1,
'controls': 0,
'modestbranding': 1,
'vq': 'hd1080'
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.mute(); // comment out if you don't want the auto played video muted

// 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) {
function stopVideo() {

position: fixed;
left: 0;
z-index: -99;
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
#yt-wrap iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;

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.

Notify of
1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Robert Steele

Hey thankyou for that, very much appreciated

Related Reading

Dynamically Adding "Link To Section" to Heading Tags with Javascript

Read More

JavaScript Generated Anchor Link Menu From Heading Tags

Read More

Turning Divi Toggles in FAQ Schema for Google FAQ rich results with Javascript + JSON

Read More

© Copyright 2021 - That Website Is Me - All Rights Reserved
Privacy Policy
Would love your thoughts, please comment.x
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram