diff options
| author | Sam Potts <sam@potts.es> | 2018-05-19 11:27:52 +1000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-05-19 11:27:52 +1000 |
| commit | 55bbf64f2b5d5c488ca1a1fab83b53bcaae09191 (patch) | |
| tree | 4ba3b1ebf7e12a7d887bb68873ae55eba5aedefa /src/js/plugins/youtube.js | |
| parent | 3bba65f2c22fe11bca7d89f8451fa1b0b5e8030e (diff) | |
| parent | c845558d960412ad5e942334fd9f60ed173e0a5a (diff) | |
| download | plyr-55bbf64f2b5d5c488ca1a1fab83b53bcaae09191.tar.lz plyr-55bbf64f2b5d5c488ca1a1fab83b53bcaae09191.tar.xz plyr-55bbf64f2b5d5c488ca1a1fab83b53bcaae09191.zip | |
Merge pull request #963 from friday/verify-poster
Make sure poster element isn't shown if the image isn't loaded
Diffstat (limited to 'src/js/plugins/youtube.js')
| -rw-r--r-- | src/js/plugins/youtube.js | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 4fde9319..10283998 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -162,7 +162,19 @@ const youtube = { player.media = utils.replaceElement(container, player.media); // Set poster image - player.media.setAttribute('poster', utils.format(player.config.urls.youtube.poster, videoId)); + const posterSrc = format => `https://img.youtube.com/vi/${videoId}/${format}default.jpg`; + + // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) + 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(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 |