sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.46k stars 2.92k forks source link

Youtube and Vimeo do not work if the player is in iframe. #1428

Open clazarev opened 5 years ago

clazarev commented 5 years ago

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

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 commented 5 years ago

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

clazarev commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

I will give it a try, thanks

laurensV commented 4 years ago

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

aerosko0315 commented 3 years ago

This is Chrome issue. It will only work if the video is muted.

leonidaswander commented 1 year ago

Is there already a solution to this problem?

tihhgoncalves commented 1 year ago

Unfortunately, the problem still persists. :(