diff options
| author | Albin Larsson <mail@albinlarsson.com> | 2018-05-15 16:22:51 +0200 |
|---|---|---|
| committer | Albin Larsson <mail@albinlarsson.com> | 2018-05-15 16:41:51 +0200 |
| commit | c845558d960412ad5e942334fd9f60ed173e0a5a (patch) | |
| tree | ae5d052adec8dab996d17513f4f6925252d10ad9 /src | |
| parent | 16c3a7d9e5be8ed2ffbbcee1c786b88d1cecc4cd (diff) | |
| download | plyr-c845558d960412ad5e942334fd9f60ed173e0a5a.tar.lz plyr-c845558d960412ad5e942334fd9f60ed173e0a5a.tar.xz plyr-c845558d960412ad5e942334fd9f60ed173e0a5a.zip | |
Youtube poster: Set css backgroundSize to 'cover' for padded youtube thumbnails
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plugins/youtube.js | 8 | ||||
| -rw-r--r-- | src/js/ui.js | 9 |
2 files changed, 14 insertions, 3 deletions
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 4ba8089b..10283998 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -168,7 +168,13 @@ const youtube = { utils.loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded .catch(() => utils.loadImage(posterSrc('sd'), 121)) // 480p padded 4:3 .catch(() => utils.loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists - .then(image => ui.setPoster.call(player, image.src)); + .then(image => ui.setPoster.call(player, image.src)) + .then(posterSrc => { + // If the image is padded, use background-size "cover" instead (like youtube does too with their posters) + if (!posterSrc.includes('maxres')) { + player.elements.poster.style.backgroundSize = 'cover'; + } + }); // Setup instance // https://developers.google.com/youtube/iframe_api_reference diff --git a/src/js/ui.js b/src/js/ui.js index 50764a86..f844f93c 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -105,8 +105,8 @@ const ui = { // Set the title ui.setTitle.call(this); - // Assure the poster image is set, if the property was added before the UI was created - if (this.poster) { + // Assure the poster image is set, if the property was added before the element was created + if (this.poster && this.elements.poster && !this.elements.poster.style.backgroundImage) { ui.setPoster.call(this, this.poster); } }, @@ -167,6 +167,11 @@ const ui = { const loadPromise = utils.loadImage(poster) .then(() => { this.elements.poster.style.backgroundImage = `url('${poster}')`; + Object.assign(this.elements.poster.style, { + backgroundImage: `url('${poster}')`, + // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube) + backgroundSize: '', + }); ui.togglePoster.call(this, true); return poster; }); |