diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 3c3dee20..2d9ba6e2 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -70,8 +70,9 @@ const vimeo = { // Set aspect ratio // For Vimeo we have an extra 300% height
to hide the standard controls and UI 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; + vimeo.padding = padding; this.elements.wrapper.style.paddingBottom = `${padding}%`; if (this.supported.ui) { @@ -299,8 +300,8 @@ const vimeo = { // Set aspect ratio based on video size Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { - const ratio = getAspectRatio(dimensions[0], dimensions[1]); - vimeo.setAspectRatio.call(this, ratio); + vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]); + vimeo.setAspectRatio.call(this, vimeo.ratio); }); // Set autopause @@ -404,6 +405,22 @@ const vimeo = { 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 setTimeout(() => ui.build.call(player), 0); },