video autoplayer using vanilla Javascript and CSS

Description :

It might seem easy to make this kinds of a website , just embed a video from YouTube and play it when the user comes to our website but the problem is

Problem :

To autoplay a video on the web on any device , the audio of the video must be muted . This is the autoplay policy followed by almost all browsers

The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC applications, and other web pages using audio features.

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Chrome's autoplay policies are simple but this generally holds true for all browsers:

1. Muted autoplay is always allowed.
2. Autoplay with sound is allowed if:
3. The user has interacted with the domain (click, tap, etc.).
4. On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
5. The user has added the site to their home screen on mobile or installed the PWA on desktop.
6. Top frames can delegate autoplay permission to their iframes to allow autoplay with sound. This make it really difficult to catch people offguard and rickrolling them as soon as they open up our website

Solution :

Did you catch the 3rd point ? Why don't we just fake an interaction ?

tl;dr-> just ask for cookies and play the rick roll when they clicks "accept cookies" lol .

A workaround to this also used by many other rick roll generators is asking the user for cookies , when the user clicks on "accept cookies" they are actually clicking on a button that will play the rickroll


This way we have the permission of the user to play the video without having their permission


Firstly I have created a simple sort of a landing page that asks the user for permission with the accept button

My "landing page" asking for cookies is overlayed over the rick roll video so that it's hidden

<div class="cookies" id="permission">
        <p>This website uses cookies to provide necessary website functionality, improve your experience and analyze our traffic.
           <br>By using our website, you agree to our Privacy Policy and our Cookies Policy.
        </p>

We need to include the script for the YouTube API using

<script id="iframe-demo" src="https://www.youtube.com/iframe_api"></script>****

I have added an event listener listening for a click from the user on the button which then unmutes the previously paused video and the video starts playing when the button is clicked

// button     
cookieConsent.addEventListener('click', () => {
        player.seekTo(0); //  player = new YT.Player('video-frame');
        player.unMute();    
    });

The accept cookies button is actually connect to the hide() function in my JavaScript file which hides the overlay on click of the button

<button onclick="hide()" id="accept">Accept</button></center>

I have also disabled any control over the video , you cannot really take off the pause and YouTube logo from the embed but again there is a workaround:

I have taken the iframe embed and in my css and made it so that the pointer cannot do anything over the video

.ytplayer{
 pointer-events: none;
}