From c845558d960412ad5e942334fd9f60ed173e0a5a Mon Sep 17 00:00:00 2001
From: Albin Larsson <mail@albinlarsson.com>
Date: Tue, 15 May 2018 16:22:51 +0200
Subject: [PATCH] Youtube poster: Set css backgroundSize to 'cover' for padded
 youtube thumbnails

---
 src/js/plugins/youtube.js | 8 +++++++-
 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;
             });