A lot of providers don't work in an iframe

[Maxou44]

Hello,

I have an issue with the react-player in iframes, the "Play" action don't work (for example on Vimeo, I always have this issue:
Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.

You can reproduce the issue with the following code:
<iframe width="100%" height="100%" src="https://cookpete.com/react-player"></iframe>

Choose a Vimeo/Youtube/Soundcloud source and click on the Play button

Any idea?

[cookpete]

play() failed because the user didn't interact with the document first. is the browser deliberately preventing playing without a user action (eg a click on the video). Autoplay is seen by modern browsers as bad UX and is slowly dying. See various discussions:

• SoundCloud doesn't autoplay even if muted #473 (comment)
• How to get Dailymotion player to autoplay like in the react-player demo? #474 (comment)
• Autoplay Policy Changes on Chrome #395 (comment)

[talibnelson]

I know this issue was closed, but I believe it's valid. I think that the play action fails at times even when the user does interact with the document first ie. a play button that triggers a load and then play. I think the issue stems from the origin receiving permission via the click, but that permission is never delegated to the iframe. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe I believe this can be fixed for the Soundcloud Player specifically by simply adding allow= 'autoplay' to it's iframe.