Plyr: Fullscreen on iPad

[shainanigans]

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

Expected behaviour

I've implemented toggleFullscreen(); on my video, and it works fine on desktop (and iPhone, but because of its native handling of videos, not because of my code). I would expect the desktop behaviour to work on an iPad as well.

Actual behaviour

On an iPad, the video stays inline and doesn't open in fullscreen.

Environment

• Browser: iOS Safari
• Version: -
• Operating System: iOS (iPad)
• Version: 11.2.5

Players affected:

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

Steps to reproduce

• Click play to toggle fullscreen and start video

Relevant links

My codepen: https://codepen.io/shainanigans-1472169587/pen/eVOxRQ

[friday]

Fullscreen has been rewritten for the next release (v3). Not sure this in particular has been fixed, but perhaps you could try on https://plyr.io/beta/ (also see announcement and info at #766)

[shainanigans]

Good suggestion, @friday , though sadly the issue doesn't appear to be fixed in beta. I've tried it on my live project and have the same issue.

[sampotts]

I presume you tried adding playsinline with v3? Using the attribute fixes many styling issues but also has a trade off that fullscreen is a little harder to work with - you end up with full-window instead. Still investigating the options there.

[shainanigans]

Thanks @sampotts , I'll have a look.

If at all possible I'd like to stick with v2 as this is going to production soon (not sure how ready v3 is). Is the issue I'm experiencing when using v2 expected? Or have I messed up the implementation somehow?

[sampotts]

It's probably a genuine issue by the sounds of it. I could take a look.

Some are already using v3 in production but I could understand your hesitance.

[shainanigans]

@sampotts , yeah, if you could take a quick peek that'd be great.

https://codepen.io/shainanigans-1472169587/pen/eVOxRQ is how I'm using it on my project.

[shainanigans]

I did end up getting it working with v3, though if there is a v2 solution I'd like to know it!

[friday]

playsinline can be added as a boolean attribute to the html5 video (in case that's what fixed it), but not youtube and vimeo I believe, and it seems like you're using youtube.

If this is urgent for you I would use v3 or fork v2 and try to hack it in.

[friday]

BTW I've used v3 in production since september (before beta). That's not to say it's stable, but it's a viable option if you can't wait.

[shainanigans]

Hi @sampotts and @friday - I need to revise my previous comment. I've _mostly_ got it working with v3. On iPhones (but not iPads, and not Android devices), the video doesn't close. Again, not sure if an implementation issue or a bug.

If you have an iPhone handy, you can see what I mean in this new codepen: https://codepen.io/shainanigans-1472169587/pen/aqbRpP

[friday]

Looking at the css and js it appears you have modifying the default behavior and appearance quite a bit.

With plyr.io/demo fullscreen works on my Android (though there aren't any youtube or vimeo examples).

Your codepen looks very broken when in fullscreen on my android. I can't tell if this is plyr or implementation, but I'm guessing it's because you've hidden the plyr element It's not happening in in my fork of your pen with no custom css and js: https://codepen.io/fullkornslimpa/pen/mXdQqq (if you press the fullscreen button) so I do think your implementation is causing this.

Also seems like fullscreen for ios isn't supported: https://caniuse.com/#feat=fullscreen (this is linked to from the v3 docs)

[sampotts]

I've added a new option in v3 which will allow you to combine playsinline and the native fullscreen. It's called iosNative under the fullscreen property and is a boolean of course - default is false (to allow custom controls). I'll add it to the docs shortly but in my testing it seems to work well.

[drsmall]

Still doesn't work for me. Using a normal video on IOS 9, the video tries to go full screen but only fills up the parent div. Position: fixed seems to be acting weird. Also tried V3 Beta. Same results.

[sampotts]

iOS 9? Yeah, probably not going to support that far back. < 5% on iOS 9 from what I can see. I'm just using the standard browser APIs and a fallback if they aren't present.

[drsmall]

The demo works just fine though. I'm guessing that's because the next absolute/relative ancestor is the body or another full width element.

I need it to work on this old device though. Any suggestions?

[sampotts]

Yeah probably a CSS issue then - let me know what you find and I can see if I can put something into the core CSS if it makes sense.

[friday]

I think setting both width and height to 100% !important for the video element while in fullscreen would fix these issues for reasonable browsers (except if devs add custom css to plyr-elements as well, in which case I think it's their problem). Not sure about ios/safari though.

Currently it seems only height is set to 100% while in fullscreen, and not using !important, so it won't overspecify inline css.

[drsmall]

Actually it seems to be an issue with using transforms and position:fixed at the same time. My entire interaction uses transforms to center divs that contain the videos. Any ideas for a workaround?

[friday]

On the video element (not a wrapper)?

Try this (you might need to add or tweak it):

.plyr--fullscreen-active video {
  position: initial !important;
  width: initial !important;
  height: initial !important;
}

And if that doesn't do it, moving any custom styling from the video element to a custom wrapper (created by you, not plyr) might.

[drsmall]

Here is a StackOverflow on the subject.

I have a centered div that uses 50% left and top with a -50% transform to center it on the screen.

Plyr's fallback on iPad makes the plyr wrapper position: fixed. Because of the "bug" in the SO link, it fails. It's an issue with my styling rather than Plyr. So to get around this I added a little hack to set transform: none to all my centering classes. Works for me.

[sampotts]

Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍