ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Youtube poster: Set css backgroundSize to 'cover' for padded youtube thumbnails

Browse Source
This commit is contained in:
Albin Larsson 2018-05-15 16:22:51 +02:00
parent 16c3a7d9e5
commit c845558d96
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/plugins/youtube.js
View File

@ -168,7 +168,13 @@ const youtube = {
utils.loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded utils.loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
.catch(() => utils.loadImage(posterSrc('sd'), 121)) // 480p padded 4:3 .catch(() => utils.loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
.catch(() => utils.loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists .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 // Setup instance
// https://developers.google.com/youtube/iframe_api_reference // https://developers.google.com/youtube/iframe_api_reference

9
src/js/ui.js
View File

@ -105,8 +105,8 @@ const ui = {
// Set the title // Set the title
ui.setTitle.call(this); ui.setTitle.call(this);
// Assure the poster image is set, if the property was added before the UI was created // Assure the poster image is set, if the property was added before the element was created
if (this.poster) { if (this.poster && this.elements.poster && !this.elements.poster.style.backgroundImage) {
ui.setPoster.call(this, this.poster); ui.setPoster.call(this, this.poster);
} }
}, },
@ -167,6 +167,11 @@ const ui = {
const loadPromise = utils.loadImage(poster) const loadPromise = utils.loadImage(poster)
.then(() => { .then(() => {
this.elements.poster.style.backgroundImage = `url('${poster}')`; 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); ui.togglePoster.call(this, true);
return poster; return poster;
}); });