react-youtube icon indicating copy to clipboard operation
react-youtube copied to clipboard

autoplay not working

Open Nefcanto opened this issue 2 years ago • 4 comments

I used your sample and autoplay is not working. I'm using next.js.

Here's a simple codesandbox using your example.

I have this error in my console:

The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.

Nefcanto avatar Mar 25 '22 13:03 Nefcanto

const opts = { height: "390", width: "640", playerVars: { // https://developers.google.com/youtube/player_parameters autoplay: 1, mute: 1 } }; Adding "mute: 1" in playerVars obj worked for me. I think it's from the YouTube API side, but I'm not sure.

KevTiv avatar Mar 27 '22 13:03 KevTiv

Same issue here, also on Next.js... mute: 1 does work, but I don't want it muted. Tried setting it to 0 but no joy. Setting loop: 1 seems to have done the trick though. Weird.

Ojay avatar Sep 22 '22 15:09 Ojay

https://www.youtube.com/watch?v=1RFiFjG7Eh4&ab_channel=garnattione

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if: --The 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 played video with sound. --The user has added the site to their home screen on mobile or installed the PWA on desktop. -Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

ill try with imtating a user click event

gazcn007 avatar Jun 13 '23 11:06 gazcn007

just add this code to onReady function const onPlayerReady: YouTubeProps['onReady'] = (event) => { // access to player in all event handlers via event.target event.target.mute(); }

Eesssn avatar Dec 01 '23 20:12 Eesssn