Plyr: [V3] [3.0.0-beta.20] No controls shown when using Vimeo on iPhone

[TipluMariusz]

• [x] Issue does not already exist
• [x] Issue observed on https://plyr.io/beta/#vimeo

Expected behaviour

When using vimeo on iPhone, controls should be shown like so:

Actual behaviour

No controls shown when using Vimeo on iPhone

Environment

• Browser: Safari
• Version: ?
• Operating System: iPhone 6
• Version: iOS 11.2.2

Players affected:

• [ ] HTML5 Video
• [ ] HTML5 Audio
• [ ] YouTube
• [x] Vimeo

Steps to reproduce

• Go to https://plyr.io/beta/#vimeo with an iPhone 6
• Poster image is visible, but no controls shown (Video has not started yet)
• You can click on the video though, and the video starts
• But no controls are shown, you can't stop the video, even if you click again on the video

Further remarks

• Controls are shown in HTML5 and YouTube
• I only have an iPhone 6 currently, I will test this with another iOS device later

Thank you for the good work, the player loosk fantastic :+1:

[sampotts]

@card This should be fixed now 👍

[SnugNest]

I have the same question. When using html5 on iPhone, the big-play button should be shown and can play when click the big-play.

[sampotts]

It does 🙄

[SnugNest]

@sampotts No, it doesn‘t... you can see from the snugnest.com in iphone . I don't know what's wrong...

[sampotts]

OK but it does on https://plyr.io so you have a problem elsewhere...

[devanflaherty]

Just a note on this.

I'm using vue-plyr and it doesn't seem to be showing any plyr ui on mobile.

People can be experiencing issues with potential plugins. As I can't seem to get any plyr UI to show on iOS. Still trying to find the solution.

[oskarame]

Same problem for me, the big play button and the controls aren't appearing on iPhone

[sampotts]

Use the latest version - v3.1.0. If you're using a plugin/wrapper by someone else (like Vue, React, etc) then you need to contact the author to get them to upgrade...

[oskarame]

Ok thanks, I was using the 3.0.6 version, i'll try with the latest one. (ps : Not using vue, react etc.)

[oskarame]

@sampotts
I don't want to disturb but it's still not working for me. It only doest that on iPhone, on iPad it's fine. I can't event stop the video. I even tried a test version of the page i'm coding, I removed all javascript except for plyr and still not working. I can send you the test link if you want.

[verde-io]

@sampotts
Seeing the same problem. Using the latest Plyr version. The controls are not added on iOS for a vimeo embed. Youtube and native video are fine. Will further investigate tomorrow and come back here if I find what's causing it.

[sampotts]

Do you see the same on https://plyr.io ?

[verde-io]

@sampotts yes i see the video on your homepage.

This is what I use to initialise the players:

var player = new Plyr(this, { autoplay: false, controls: ['play', 'progress', 'mute', 'volume', 'fullscreen', 'settings'], settings: ['captions', 'quality'], fullscreen: { enabled: true, fallback: true, iosNative: true }, clickToPlay: true });

And this is the html:

<div id="player-454" class="video-player plyr__video-embed">
<iframe src="https://player.vimeo.com/video/222486164?loop=false&amp;autoplay=true&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Like I said before, youtube and video work fine.

[verde-io]

@sampotts tested last night on Android Chrome and it's fine there, on iOS it doesn't work in Chrome either. It seems like there's definitely a bug there.

[verde-io]

@sampotts I've done some debugging today and have found what the problem is.

For Vimeo, this condition on line 6653 truthy.includes(params.playsinline) is not met and as a result this.config.inline = true; isn't set.

This in turn causes var playsInline = browser.isIPhone && inline && support.inline to be false and as a result ui = support.rangeInput && (!browser.isIPhone || playsInline) is undefined.

As a result the controls don't get added for Vimeo on iOS.

[sampotts]

Thanks for that. I'll get a fix into the next release (hopefully tomorrow).

[sampotts]

This should actually be resolved now in v3.2.0

[verde-io]

@sampotts yes, seems to be working, thanks!