diff --git a/src/js/listeners.js b/src/js/listeners.js index eb621207..d4d7bb32 100644 --- a/src/js/listeners.js +++ b/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) { diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index e1e873fa..8d920eea 100644 --- a/src/js/plugins/vimeo.js +++ b/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); }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index d862e4dd..7abc05fe 100644 --- a/src/js/plugins/youtube.js +++ b/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 diff --git a/src/js/plyr.js b/src/js/plyr.js index be1cba4b..e81e073e 100644 --- a/src/js/plyr.js +++ b/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; diff --git a/src/js/utils/style.js b/src/js/utils/style.js index 191e6461..e51892e5 100644 --- a/src/js/utils/style.js +++ b/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;