Rewrite ui.setPoster to check that images arent broken or youtube fallback images. Only show poster element when valid

src/js/defaults.js

@@ -199,7 +199,6 @@ const defaults = {
         youtube: {
             sdk: 'https://www.youtube.com/iframe_api',
             api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet',
-            poster: 'https://img.youtube.com/vi/{0}/maxresdefault.jpg,https://img.youtube.com/vi/{0}/hqdefault.jpg',
         },
         googleIMA: {
             sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
@@ -332,6 +331,7 @@ const defaults = {
         embed: 'plyr__video-embed',
         embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
+        posterEnabled: 'plyr__poster-enabled',
         ads: 'plyr__ads',
         control: 'plyr__control',
         playing: 'plyr--playing',

src/js/plugins/vimeo.js

@@ -99,11 +99,8 @@ const vimeo = {
             // Get original image
             url.pathname = `${url.pathname.split('_')[0]}.jpg`;
 
-            // Set attribute
+            // Set and show poster
-            player.media.setAttribute('poster', url.href);
+            ui.setPoster.call(player, url.href);
-
-            // Update
-            ui.setPoster.call(player);
         });
 
         // Setup instance

src/js/plugins/youtube.js

@@ -162,7 +162,13 @@ 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));
 
         // Setup instance
         // https://developers.google.com/youtube/iframe_api_reference

src/js/plyr.js

@@ -801,10 +801,7 @@ class Plyr {
             return;
         }
 
-        if (utils.is.string(input)) {
+        ui.setPoster.call(this, input);
-            this.media.setAttribute('poster', input);
-            ui.setPoster.call(this);
-        }
     }
 
     /**

src/js/ui.js

@@ -105,8 +105,10 @@ const ui = {
         // Set the title
         ui.setTitle.call(this);
 
-        // Set the poster image
+        // Assure the poster image is set, if the property was added before the UI was created
-        ui.setPoster.call(this);
+        if (this.poster) {
+            ui.setPoster.call(this, this.poster);
+        }
     },
 
     // Setup aria attribute for play and iframe title
@@ -146,15 +148,34 @@ const ui = {
         }
     },
 
-    // Set the poster image
+    // Toggle poster
-    setPoster() {
+    togglePoster(enable) {
-        if (!utils.is.element(this.elements.poster) || utils.is.empty(this.poster)) {
+        utils.toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
-            return;
+    },
+
+    // Set the poster image (async)
+    setPoster(poster) {
+        // Set property regardless of validity
+        this.media.setAttribute('poster', poster);
+
+        // Bail if element is missing
+        if (!utils.is.element(this.elements.poster)) {
+            return Promise.reject();
         }
 
-        // Set the inline style
+        // Load the image, and set poster if successful
-        const posters = this.poster.split(',');
+        const loadPromise = utils.loadImage(poster)
-        this.elements.poster.style.backgroundImage = posters.map(p => `url('${p}')`).join(',');
+            .then(() => {
+                this.elements.poster.style.backgroundImage = `url('${poster}')`;
+                ui.togglePoster.call(this, true);
+                return poster;
+            });
+
+        // Hide the element if the poster can't be loaded (otherwise it will just be a black element covering the video)
+        loadPromise.catch(() => ui.togglePoster.call(this, false));
+
+        // Return the promise so the caller can use it as well
+        return loadPromise;
     },
 
     // Check playing state

src/sass/components/poster.scss

@@ -18,6 +18,6 @@
     pointer-events: none;
 }
 
-.plyr--stopped .plyr__poster {
+.plyr--stopped.plyr__poster-enabled .plyr__poster {
     opacity: 1;
 }