diff options
Diffstat (limited to 'src/js/plugins/vimeo.js')
| -rw-r--r-- | src/js/plugins/vimeo.js | 23 |
1 files changed, 17 insertions, 6 deletions
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 9b67bdb0..83b6d942 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -16,12 +16,8 @@ const vimeo = { // Add embed class for responsive utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); - // Set aspect ratio - const ratio = this.config.ratio.split(':'); - const padding = 100 / ratio[0] * ratio[1]; - const offset = (300 - padding) / 6; - this.elements.wrapper.style.paddingBottom = `${padding}%`; - this.media.style.transform = `translateY(-${offset}%)`; + // Set intial ratio + vimeo.setAspectRatio.call(this); // Set ID this.media.setAttribute('id', utils.generateId(this.type)); @@ -41,6 +37,15 @@ const vimeo = { } }, + // Set aspect ratio + setAspectRatio(input) { + const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); + const padding = 100 / ratio[0] * ratio[1]; + const offset = (300 - padding) / 6; + this.elements.wrapper.style.paddingBottom = `${padding}%`; + this.media.style.transform = `translateY(-${offset}%)`; + }, + // API Ready ready() { const player = this; @@ -161,6 +166,12 @@ const vimeo = { }, }); + // Set aspect ratio based on video size + Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { + const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); + vimeo.setAspectRatio.call(this, ratio); + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player); |