Video won't play in Chrome Browsers but play fine in Firefox?

[stavert]

Current Behavior

We have a video player which can wrap youtube, vimeo, etc to add additional features. The platform can also upload/host videos (MP4). We utilize the react-player and are seeing a very strange problem only seemingly in Chrome and Edge and only for videos which we've wrapped from youtube, vimeo, etc. Our own hosted videos which have been uploaded play fine across all browsers. Upon failure the videos appear to load and be ready to play but play doesn't work and an error is thrown by the react-player in the console.

ReactPlayer: YouTube player could not call playVideo – The player was not available

We have checked differences of cross-site errors, cookies, etc and are just not seeing what the problem is. We have had some partial success with the absence (fails) or presence (works) of autoplay in a simple case on https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe but our conclusions are inconsistent. We're not sure if autoplay is somehow getting in the middle or if we have a strange nested iframe race condition on player loading.

I am trying to learn as much as possible on how to debug a problem like this but I've sort of inherited this code. Any suggestions are appreciated immensely on how to hunt this thing down. I do feel like it's a Chromium specific security constraint/difference but I'm just not seeing anything in the browser console which is leading me to the specific cause. There are some cross-domain errors showing but they show when things work also so it's difficult to establish the cause.

Expected Behavior

Expect the video to play on chromium browsers.

Steps to Reproduce

The jsFiddle exhibits the problem:

https://jsfiddle.net/stavert/34evnd0a/2

Run it in Chrome and hitting play, nothing will happen.
Run it in Firefox, hit play and it plays just fine.

The embed being used in the test is:

<iframe width="100%" height="600" src="https://dev.rali.io/player?id=lt8j0lmtg0nv0vedd70150pjohbvgvn4" frameborder="0" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen></iframe>

Environment

• URL attempting to play: https://dev.rali.io/player?id=lt8j0lmtg0nv0vedd70150pjohbvgvn4

• Browser:

  • Fails:
    * Chrome Version 107.0.5304.107
    * Edge Version 107.0.1418.42
  • Works:
    * Firefox Version 107.0

• Operating system: Windows 10, MAC, etc

• jsFiddle: https://jsfiddle.net/stavert/34evnd0a/2/

Other Information

Our site currently uses [email protected] but we have tried updating to 2.11.0 but the problem persists.

[stavert]

An observation from Firefox where the video plays:

Cookie's are partitioned differently in FF vs Chrome as it's not a fully baked feature in Chrome yet?

[stavert]

This article seems like it may be our problem. We are experimenting with it.

videojs/videojs-youtube#593

[stavert]

We have had success so far. We set the player.muted=true and the videos (both youtube and vimeo) sourced videos embedded for us now through our player. Not sure if there's anything in the react-player which could be adjusted to fix this but wanted to share our findings. I will close this issue if there is no additional input in a few days.

[stavert]

Not resolved but better understood. No issues with react player. Closing