Automatic Vimeo aspect ratio

src/js/listeners.js

@@ -176,7 +176,6 @@ const listeners = {
 
         // Keyboard shortcuts
         if (this.config.keyboard.global) {
-            this.warn('bound');
             utils.on(window, 'keydown keyup', handleKey, false);
         } else if (this.config.keyboard.focused) {
             utils.on(this.elements.container, 'keydown keyup', handleKey, false);

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
+        // Set intial ratio
-        const ratio = this.config.ratio.split(':');
+        vimeo.setAspectRatio.call(this);
-        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 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);

src/js/plugins/youtube.js

@@ -18,8 +18,7 @@ const youtube = {
         utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
 
         // Set aspect ratio
-        const ratio = this.config.ratio.split(':');
+        youtube.setAspectRatio.call(this);
-        this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
 
         // Set ID
         this.media.setAttribute('id', utils.generateId(this.type));
@@ -48,6 +47,12 @@ const youtube = {
         }
     },
 
+    // Set aspect ratio
+    setAspectRatio() {
+        const ratio = this.config.ratio.split(':');
+        this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
+    },
+
     // API ready
     ready(videoId) {
         const player = this;

src/js/plyr.js

@@ -79,7 +79,6 @@ class Plyr {
         };
 
         // Captions
-        // TODO: captions.enabled should be in config?
         this.captions = {
             enabled: null,
             tracks: null,

src/js/utils.js

@@ -631,6 +631,13 @@ const utils = {
         return fragment.firstChild.innerText;
     },
 
+    // Get aspect ratio for dimensions
+    getAspectRatio(width, height) {
+        const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
+        const ratio = getRatio(width, height);
+        return `${width / ratio}:${height / ratio}`;
+    },
+
     // Get the transition end event
     transitionEnd: (() => {
         const element = document.createElement('span');