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>
</div>

<script>
// 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) {
event.target.playVideo();
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) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>

<style>
#yt-wrap{
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%;
}
</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.

Was this helpful?
YesNo
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

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

Page Last Updated: 
July 14, 2020
© Copyright - That Website Is Me - All Rights Reserved
cogheartenvelopelaptop-phone
0
Would love your thoughts, please comment.x
()
x