Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

YouTube autoplay not working in Chrome

For a while now I have been using this script, where the video is automatically playing full-screen. For now suddenly the video doesn't play automatically in Chrome. But in Firefox and Edge it still works.

So maybe Google changed settings? Does anyone know how to fix this, please? You see the live example here: www.brunomazereel.com

<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    playerVars: {
        'autoplay': 1,
        'controls': 0,
        'autohide': 1,
        'wmode': 'opaque',
        'showinfo': 0,
        'loop': 1,
        'rel': 0,
        'playlist': 'rh5QiehIlVA,Bl63bdR-Ko0,'
        },
    videoId: 'u-cjliof1xk',
    events: {
        'onReady': onPlayerReady
    }
});
}
function onPlayerReady(event) {
event.target();
$('#text').fadeIn(400);
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
   wS = $(this).scrollTop();
if (wS > hT) {
  player.pauseVideo();
}
else {
  player.playVideo();
}
});
</script>
like image 348
chechu Avatar asked May 07 '18 14:05

chechu


People also ask

Why is autoplay not working on Chrome?

Chrome does not allow autoplay if the video is not muted. So to autoplay video you need to set both autoplay and muted attribute.

How do I enable auto play in Chrome?

Step 1 - Open the Google Chrome browser. Step 3 - Click the Autoplay policy drop-down and select "No user gesture is required." This will make it so that you don't need to intereact with the page in order for the video or audio to start playing automatically. Step 4 - Restart the browser.


2 Answers

(One) of the possible solution taken from the comments discussion would be muting the video if sound isn't that important in your case (if it is, I'll leave the answer as it could help other people).

It's apparently the only way to have autoplay always enabled. From the article :

"Muted autoplay is always allowed."

Source : Google changelog


Simply add in your playerVars:

mute : 1

Source for the muted video

like image 169
Alexandre Beaudet Avatar answered Oct 06 '22 19:10

Alexandre Beaudet


You should put the allow="autoplay" on the embedding iframe element

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Chrome's autoplay policies :

  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
  • 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.
like image 20
serge Avatar answered Oct 06 '22 19:10

serge