-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fullscreen on iPad #768
Comments
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) |
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. |
I presume you tried adding |
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? |
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. |
@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. |
I did end up getting it working with v3, though if there is a v2 solution I'd like to know it! |
If this is urgent for you I would use v3 or fork v2 and try to hack it in. |
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. |
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 |
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. Also seems like fullscreen for ios isn't supported: https://caniuse.com/#feat=fullscreen (this is linked to from the v3 docs) |
I've added a new option in v3 which will allow you to combine |
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. |
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. |
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? |
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. |
I think setting both width and height to Currently it seems only height is set to 100% while in fullscreen, and not using |
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? |
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. |
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. |
Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍 |
You're so awesome man! I was thinking of this exact feature and you've already beaten me to it, I love plyr! 😁 |
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
Players affected:
Steps to reproduce
Relevant links
My codepen: https://codepen.io/shainanigans-1472169587/pen/eVOxRQ
The text was updated successfully, but these errors were encountered: