Trying to make YouTube autoplay Google Chrome compliant

I’m going to need to figure out how to do this so the same method works in both browsers.

Right now, currently autoplay doesn’t work in chrome, only firefox.

I’m not sure how this would be done.

Code 1

Code 2:

1.) 1st Method. Change autoplay policy in chrome://flags/#autoplay-policy to “No user gesture is required”

Chrome’s autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has [added the site to their home screen].
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

2.) 2nd Method. Use script
https://stackoverflow.com/a/50676660


 <div id="player"></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);

  function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
      videoId: '439frli5VbM', // YouTube Video ID
      width: 560, // Player width (in px)
      height: 316, // Player height (in px)
      playerVars: {
        autoplay: 1, // Auto-play the video on load
        controls: 1, // Show pause/play buttons in player
        showinfo: 0, // Hide the video title
        modestbranding: 1, // Hide the Youtube Logo
        loop: 1, // Run the video in a loop
        fs: 0, // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3, // Hide the Video Annotations
        autohide: 0 // Hide video controls when playing
      },
      events: {
        onReady: function(e) {
          e.target.mute();
        }
      }
    });
  }

Hi there asasass,

“Trying to make YouTube autoplay”

I would humbly suggest that you don’t. :unhappy:

coothead

Why not?

Then, then auto play will work on one browser, and won’t work on another.

Shouldn’t they work and behave the same way on both?

coothead

2 Likes

What if it’s set up like this?

That is OK. :winky:

The user/visitor has the choice of initiating the play or not.

coothead

After you click the image, in Chrome, it doesn’t start playing.

No, but the user/visitor then has another button to click. :ok:

I see no problem with that, as control is still in the hands
of the user/visitor. :ok:

coothead

1 Like

But then you have to click 2 times instead of one time.

It may be a problem for you, but it is not a problem for the user/visitor. :unhappy:
The reason that the user/visitor has to click twice is your fault not theirs. :winky:

If your desire is for “arty farty” page layouts then a loss of functionality is
the price that you may have to pay.for your indulgences. :rolleyes:

coothead

I can either use then, auto play with mute,

or auto play with a cover that requires 2 mouse clicks.

A single click to play with no autoplay, is the preferred solution that satisfies the majority of people.

Web browsers are working towards banning autoplay completely. Too many annoying advertisers have been making a nuisance of themself about that.

1 Like

Is one hide on .wrapg enough?

(function iife() {
  "use strict";
  document.querySelector(".jacketd").addEventListener("click", function() {
    document.querySelector(".wrapg").classList.remove("hide");
   /* document.querySelector(".js-player").classList.remove("hide");*/
  });
}());

or should I add another hide also?

document.querySelector(".js-player").classList.remove("hide")


<div class="wrapg hide">

  <iframe class="js-player hide" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

One is enough until you need two.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.