Ratio improvements

src/js/listeners.js

@@ -318,7 +318,7 @@ class Listeners {
 
             const target = player.elements.wrapper.firstChild;
             const [, y] = ratio;
-            const [videoX, videoY] = getAspectRatio.call(this);
+            const [videoX, videoY] = getAspectRatio.call(player);
 
             target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
             target.style.margin = toggle ? '0 auto' : null;
@@ -356,7 +356,7 @@ class Listeners {
             const { padding, ratio } = setPlayerSize(isEnter);
 
             // Set Vimeo gutter
-            setGutter.call(player, ratio, padding, isEnter);
+            setGutter(ratio, padding, isEnter);
 
             // If not using native fullscreen, we need to check for resizes of viewport
             if (!usingNative) {

src/js/plugins/vimeo.js

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

src/js/plugins/youtube.js

@@ -52,9 +52,6 @@ const youtube = {
         // Add embed class for responsive
         toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
 
-        // Set aspect ratio
-        setAspectRatio.call(this);
-
         // Setup API
         if (is.object(window.YT) && is.function(window.YT.Player)) {
             youtube.ready.call(this);
@@ -84,33 +81,27 @@ const youtube = {
 
     // Get the media title
     getTitle(videoId) {
-        // Try via undocumented API method first
-        // This method disappears now and then though...
-        // https://github.com/sampotts/plyr/issues/709
-        if (is.function(this.embed.getVideoData)) {
-            const { title } = this.embed.getVideoData();
+        const url = format(this.config.urls.youtube.api, videoId);
 
-            if (is.empty(title)) {
-                this.config.title = title;
-                ui.setTitle.call(this);
-                return;
-            }
-        }
+        fetch(url)
+            .then(data => {
+                if (is.object(data)) {
+                    const { title, height, width } = data;
 
-        // Or via Google API
-        const key = this.config.keys.google;
-        if (is.string(key) && !is.empty(key)) {
-            const url = format(this.config.urls.youtube.api, videoId, key);
+                    // Set title
+                    this.config.title = title;
+                    ui.setTitle.call(this);
 
-            fetch(url)
-                .then(result => {
-                    if (is.object(result)) {
-                        this.config.title = result.items[0].snippet.title;
-                        ui.setTitle.call(this);
-                    }
-                })
-                .catch(() => {});
-        }
+                    // Set aspect ratio
+                    this.embed.ratio = [width, height];
+                }
+
+                setAspectRatio.call(this);
+            })
+            .catch(() => {
+                // Set aspect ratio
+                setAspectRatio.call(this);
+            });
     },
 
     // API ready

src/js/plyr.js

@@ -894,6 +894,10 @@ class Plyr {
      * Get the current aspect ratio in use
      */
     get ratio() {
+        if (!this.isVideo) {
+            return null;
+        }
+
         const ratio = reduceAspectRatio(getAspectRatio.call(this));
 
         return is.array(ratio) ? ratio.join(':') : ratio;

src/js/utils/style.js

@@ -44,8 +44,14 @@ export function getAspectRatio(input) {
     }
 
     // Get from embed
-    if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) {
-        ratio = parse(this.embed.ratio);
+    if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
+        ({ ratio } = this.embed);
+    }
+
+    // Get from HTML5 video
+    if (ratio === null && this.isHTML5) {
+        const { videoWidth, videoHeight } = this.media;
+        ratio = reduceAspectRatio([videoWidth, videoHeight]);
     }
 
     return ratio;