aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/listeners.js4
-rw-r--r--src/js/plugins/vimeo.js2
-rw-r--r--src/js/plugins/youtube.js47
-rw-r--r--src/js/plyr.js4
-rw-r--r--src/js/utils/style.js10
5 files changed, 34 insertions, 33 deletions
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();
-
- if (is.empty(title)) {
- this.config.title = title;
- ui.setTitle.call(this);
- return;
- }
- }
+ const url = format(this.config.urls.youtube.api, videoId);
- // 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);
+ fetch(url)
+ .then(data => {
+ if (is.object(data)) {
+ const { title, height, width } = data;
- fetch(url)
- .then(result => {
- if (is.object(result)) {
- this.config.title = result.items[0].snippet.title;
- ui.setTitle.call(this);
- }
- })
- .catch(() => {});
- }
+ // Set title
+ this.config.title = title;
+ ui.setTitle.call(this);
+
+ // 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;