diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/listeners.js | 4 | ||||
| -rw-r--r-- | src/js/plugins/vimeo.js | 2 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 47 | ||||
| -rw-r--r-- | src/js/plyr.js | 4 | ||||
| -rw-r--r-- | src/js/utils/style.js | 10 | 
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; | 
