plyr
plyr copied to clipboard
sampotts
Request : force fullscreen in landscape on mobile devices
- [x] Issue does not already exist
- [ ] Issue observed on https://plyr.io
Expected behaviour
Not sure if it should be a default behaviour but when using the chrome player fullscreen button we get the video forced in landscape mode which is nice, same thing with the youtube app, even if you don't enable landscape or auto rotation on the device, in plyr there's no way to force landscape fullscreen like that
- Browser: Chrome
- Version: 52
- Operating System: Android
- Version: 7.1.1
Players affected:
- [x] HTML5 Video
- [ ] HTML5 Audio
- [ ] YouTube
- [ ] Vimeo
Steps to reproduce
- Click fullscreen when device is in portrait
Relevant links
Yes. I've been looking solutions for that Mobile Orientation. By default behaviour using <video src="somelink" allowfullscreen > that allowfullscreen works perfectly when pressed for fullscreen, automatically landscape orientation for mobile. We need this feature ASAP ! . Also, I've been thinking using eventlistener for orientationchange where a device is using mobile size.
Okay, so after forgetting about this just found an easy way to get this working, I'm using some code on my custom javascript not tested to add to plyr yet, When fullscreen toggling is done just force "landscape", this will align on the actual landscape orientation : $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() { if(plyr.fullscreen.active) { screen.orientation.lock("landscape"); } else { screen.orientation.unlock(); } }
Would need to be disabled if height > width
Looks like there's no support in Safari: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock
But we can always add this in...
But we can always add this in...
Just a reminder to please add this in so that Plyr can be on par with the normal html5 player in Android Chrome.
Looks like there's no support in Safari: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock
But we can always add this in...
Any progress yet?
var winwidth=$(window).width();
var winheight=$(window).height();
const player = Plyr.setup('#player');
player.forEach (item => {
item.on('enterfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(90deg)", "height": winwidth, "width": winheight, "margin-left": "0px", "margin-right": "0px"});
})
item.on('exitfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(0deg)", "height": "100%", "width": "100%", "margin-left": "auto", "margin-right": "auto"});
})
});
I also faced the same problem. And that's how I did it, it works very nicely!
