Plyr: Vimeo on iPad

[ncnkg]

Embedded Vimeo Videos can't be played on iPad. Any solution on this?

[sampotts]

I'll look into this ASAP. Sorry for the delay.

[magicspon]

Any news on this issue?

[sampotts]

I've been trying to get to the root of it but can't seem to work out what's causing it. It seems to be an issue for YouTube as well. Still looking at it, it's my next priority.

[kitestudio]

To fix the issue I removed the CSS:

.plyr .plyr__video-embed iframe {
    pointer-events: none;
}

The Plyr controls do not function on the iPad.

[srinivas08]

Hi,

Can you make it pointer-events: auto; . it should work in ipad also.

Thanks,
Srinivas

[sampotts]

There's a reason it's pointer-events: none - so that click events don't get to the iframe, using auto would be pointless as it's the default value. I'll do some testing but I suspect that won't be the fix. The problem seemed to also effect the YouTube embeds too.

[srinivas08]

I agree, hope we will get update soon on the same.Thanks,

[sampotts]

I think I've worked out why this is an issue. It's an iOS limitation of playing videos without user input. As the iframe is treated as a seperate document the click on the parent of the iframe doesn't count (since it calls the API methods). Removing pointer-events: none fixes YouTube as that seems to bind to the video container to play but does mean that some changes will have to be made regarding hiding and showing controls on touch rather than play/pause. However, Vimeo doesn't bind to the video container, only their own play/pause button (hidden off screen in plyr) so this won't work unless we just use the vimeo controls for vimeo embeds. Less than ideal. I will keep digging.

Here's a related thread on the YouTube issues:
http://stackoverflow.com/questions/33902844/how-to-fix-if-playback-doesnt-begin-shortly-try-restarting-your-device-using

[0xsven]

Any news on this?

Can I turn off plyr on iPad somehow? So it displays the same way as on iphone?

EDIT:
This pull request did it for me
https://github.com/Selz/plyr/pull/276

[sampotts]

I've temporarily disabled support for YouTube and Vimeo on iOS until I can find a way to get them working 100%. It's an iOS limitation currently.

[gino8080]

Could be a temp solution adding something like ?

 @media (max-width: 767px) {
      .plyr .plyr__video-embed iframe,
      .plyr__tooltip {
          pointer-events: auto !important;
      }
  }

  body.ios,
  body.ipad{
    .plyr .plyr__video-embed iframe,
    .plyr__tooltip {
        pointer-events: auto !important;
    }
  }

[sampotts]

Does that work? I think the Vimeo API is the issue. I raised an issue on the API:
https://github.com/vimeo/player.js/issues/87

[sampotts]

YouTube should be working with full UI in the latest version, on iPads running iOS 10.

[Deepak2322]

is this an issue with youtube and Vimeo API..?

[sampotts]

Yes. Read my comments above yours 👍

[Deepak2322]

thanks:-)

[alejandroiglesias]

@SamPotts so is it affecting YouTube or not? I see that the current Plyr code disables controls on iOS for YouTube besides Vimeo.