ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for Vimeo fullscreen with non 16:9 aspect ratios

Browse Source
This commit is contained in:
Sam Potts 2018-11-08 23:19:11 +11:00
parent d6f20e2756
commit a19ad69038
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/js/plugins/vimeo.js
View File

@ -70,8 +70,9 @@ const vimeo = {
// Set aspect ratio // Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio(input) { setAspectRatio(input) {
const [x, y] = (is.string(input) ? input : this.config.ratio).split(':'); const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
const padding = (100 / x) * y; const padding = (100 / x) * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = `${padding}%`; this.elements.wrapper.style.paddingBottom = `${padding}%`;
if (this.supported.ui) { if (this.supported.ui) {
@ -299,8 +300,8 @@ const vimeo = {
// Set aspect ratio based on video size // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
const ratio = getAspectRatio(dimensions[0], dimensions[1]); vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(this, ratio); vimeo.setAspectRatio.call(this, vimeo.ratio);
}); });
// Set autopause // Set autopause
@ -404,6 +405,22 @@ const vimeo = {
triggerEvent.call(player, player.media, 'error'); triggerEvent.call(player, player.media, 'error');
}); });
// Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', event => {
const { target } = player.fullscreen;
// Ignore for iOS native
if (target !== player.elements.container) {
return;
}
const toggle = event.type === 'enterfullscreen';
const [x, y] = vimeo.ratio.split(':').map(Number);
const dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
});
// Rebuild UI // Rebuild UI
setTimeout(() => ui.build.call(player), 0); setTimeout(() => ui.build.call(player), 0);
}, },