Aspect ratio improvements (fixes #1042, fixes #1366)

src/js/config/defaults.js

@@ -42,8 +42,9 @@ const defaults = {
     // Clicking the currentTime inverts it's value to show time left rather than elapsed
     toggleInvert: true,
 
-    // Aspect ratio (for embeds)
-    ratio: '16:9',
+    // Force an aspect ratio
+    // The format must be `'w:h'` (e.g. `'16:9'`)
+    ratio: null,
 
     // Click video container to play/pause
     clickToPlay: true,
@@ -330,6 +331,7 @@ const defaults = {
         provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',
         embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         posterEnabled: 'plyr__poster-enabled',

src/js/html5.js

@@ -6,6 +6,7 @@ import support from './support';
 import { removeElement } from './utils/elements';
 import { triggerEvent } from './utils/events';
 import is from './utils/is';
+import { setAspectRatio } from './utils/style';
 
 const html5 = {
     getSources() {
@@ -43,6 +44,9 @@ const html5 = {
 
         const player = this;
 
+        // Set aspect ratio if set
+        setAspectRatio.call(player);
+
         // Quality
         Object.defineProperty(player.media, 'quality', {
             get() {

src/js/listeners.js

@@ -9,7 +9,7 @@ import browser from './utils/browser';
 import { getElement, getElements, matches, toggleClass, toggleHidden } from './utils/elements';
 import { off, on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';
-import { setAspectRatio } from './utils/style';
+import { getAspectRatio, setAspectRatio } from './utils/style';
 
 class Listeners {
     constructor(player) {
@@ -317,10 +317,10 @@ class Listeners {
             }
 
             const target = player.elements.wrapper.firstChild;
-            const [, height] = ratio.split(':').map(Number);
-            const [videoWidth, videoHeight] = player.embed.ratio.split(':').map(Number);
+            const [, y] = ratio;
+            const [videoX, videoY] = getAspectRatio.call(this);
 
-            target.style.maxWidth = toggle ? `${(height / videoHeight) * videoWidth}px` : null;
+            target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
             target.style.margin = toggle ? '0 auto' : null;
         };
 

src/js/plugins/vimeo.js

@@ -282,7 +282,7 @@ const vimeo = {
         Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
             const [width, height] = dimensions;
             player.embed.ratio = `${width}:${height}`;
-            setAspectRatio.call(this, player.embed.ratio);
+            setAspectRatio.call(this);
         });
 
         // Set autopause

src/js/plyr.js

@@ -26,6 +26,7 @@ import { off, on, once, triggerEvent, unbindListeners } from './utils/events';
 import is from './utils/is';
 import loadSprite from './utils/loadSprite';
 import { cloneDeep, extend } from './utils/objects';
+import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
 import { parseUrl } from './utils/urls';
 
 // Private properties
@@ -846,6 +847,34 @@ class Plyr {
         return this.media.getAttribute('poster');
     }
 
+    /**
+     * Get the current aspect ratio in use
+     */
+    get ratio() {
+        const ratio = reduceAspectRatio(getAspectRatio.call(this));
+
+        return is.array(ratio) ? ratio.join(':') : ratio;
+    }
+
+    /**
+     * Set video aspect ratio
+     */
+    set ratio(input) {
+        if (!this.isVideo) {
+            this.debug.warn('Aspect ratio can only be set for video');
+            return;
+        }
+
+        if (!is.string(input) || !validateRatio(input)) {
+            this.debug.error(`Invalid aspect ratio specified (${input})`);
+            return;
+        }
+
+        this.config.ratio = input;
+
+        setAspectRatio.call(this);
+    }
+
     /**
      * Set the autoplay state
      * @param {Boolean} input - Whether to autoplay or not

src/js/utils/style.js

@@ -4,26 +4,63 @@
 
 import is from './is';
 
-/* function reduceAspectRatio(width, height) {
-    const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
-    const ratio = getRatio(width, height);
-    return `${width / ratio}:${height / ratio}`;
-} */
+export function validateRatio(input) {
+    if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
+        return false;
+    }
+
+    const ratio = is.array(input) ? input : input.split(':');
+
+    return ratio.map(Number).every(is.number);
+}
+
+export function reduceAspectRatio(ratio) {
+    if (!is.array(ratio) || !ratio.every(is.number)) {
+        return null;
+    }
+
+    const [width, height] = ratio;
+    const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
+    const divider = getDivider(width, height);
+
+    return [width / divider, height / divider];
+}
+
+export function getAspectRatio(input) {
+    const parse = ratio => {
+        if (!validateRatio(ratio)) {
+            return null;
+        }
+
+        return ratio.split(':').map(Number);
+    };
+
+    // Provided ratio
+    let ratio = parse(input);
+
+    // Get from config
+    if (ratio === null) {
+        ratio = parse(this.config.ratio);
+    }
+
+    // Get from embed
+    if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) {
+        ratio = parse(this.embed.ratio);
+    }
+
+    return ratio;
+}
 
 // Set aspect ratio for responsive container
 export function setAspectRatio(input) {
-    let ratio = input;
-
-    if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) {
-        ({ ratio } = this.embed);
+    if (!this.isVideo) {
+        return {};
     }
 
-    if (!is.string(ratio)) {
-        ({ ratio } = this.config);
-    }
+    const ratio = getAspectRatio.call(this, input);
 
-    const [x, y] = ratio.split(':').map(Number);
-    const padding = (100 / x) * y;
+    const [w, h] = is.array(ratio) ? ratio : [0, 0];
+    const padding = (100 / w) * h;
 
     this.elements.wrapper.style.paddingBottom = `${padding}%`;
 
@@ -32,6 +69,8 @@ export function setAspectRatio(input) {
         const height = 240;
         const offset = (height - padding) / (height / 50);
         this.media.style.transform = `translateY(-${offset}%)`;
+    } else if (this.isHTML5) {
+        this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
     }
 
     return { padding, ratio };

src/sass/components/embed.scss

@@ -6,20 +6,21 @@
 // Default to 16:9 ratio but this is set by JavaScript based on config
 $embed-padding: ((100 / 16) * 9);
 
-.plyr__video-embed {
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
     height: 0;
     padding-bottom: to-percentage($embed-padding);
-    position: relative;
+}
 
-    iframe {
-        border: 0;
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        user-select: none;
-        width: 100%;
-    }
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    user-select: none;
+    width: 100%;
 }
 
 // If the full custom UI is supported