Plyr: Youtube and Vimeo do not work if the player is in iframe.

[clazarev]

Expected behavior

Player should play youtube or vimeo if in a frame

Actual behaviour

The player shows up, controls are visible, screenshot is there, but Play does not work
does not work. Event examples on codepen.io

Steps to reproduce

Create master.html page. Inside this page, use iframe, referencing to player.html. In player.html put plyr control.
Run master.html

Environment

• Browser: Chrome
• Version: Latest
• Operating System: Windows 10
• Version:

Console errors (if any)

for youtube, console is clear, for vimeo there is the error below:

player.js:2 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
at https://player.vimeo.com/api/player.js:2:8726
at Array.forEach ()
at b (https://player.vimeo.com/api/player.js:2:8700)
at e (https://player.vimeo.com/api/player.js:2:10447)
(anonymous) @ player.js:2
b @ player.js:2
e @ player.js:2

Link to where the bug is happening

https://codepen.io/pen?template=bKeXNq
https://codepen.io/pen?template=GGqbbJ

[Blucreation]

The provided codepen links work fine for me with no errors.

[clazarev]

The provided codepen links work fine for me with no errors.

here is another similar ticket https://github.com/sampotts/plyr/issues/1413

the player shows up but does not play

[freezer278]

Had the same issue, you have to add this attribute to iframe element: allow="autoplay; fullscreen
So it has to be something like this:

<iframe frameborder="0"
        allow="autoplay; fullscreen"
        allowFullScreen
        src="..."></iframe>

[clazarev]

I will give it a try, thanks

[laurensV]

This problem is also there in chrome on Macs.. Works on windows/linux on chrome, but on mac the video's only play when you mute the video. As soon as you unmute the video it pauses the video and shows the following javascript warning:

Unmuting failed and the element was paused instead because the user didn't interact with the document before.

Above problem only happens when you are using it in a iframe like codepen/jsfiddle, so to test it you can use this jsfiddle:

https://jsfiddle.net/b783zmL2/4