Poster image fix (fixes #1763)

demo/index.html

@@ -131,13 +131,12 @@
         </div>
       </header>
       <main>
-        <!-- style="--plyr-color-main: #47bb4d; --plyr-video-control-background-hover: var(--plyr-color-main); " -->
+        <div id="container">
-        <div id="container" style="--plyr-color-main: #1ac266;">
           <video
             controls
             crossorigin
             playsinline
-            poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
             id="player"
           >
             <!-- Video files -->

src/js/media.js

@@ -38,14 +38,12 @@ const media = {
       // Wrap the video in a container
       wrap(this.media, this.elements.wrapper);
 
-      // Faux poster container
+      // Poster image container
-      if (this.isEmbed) {
+      this.elements.poster = createElement('div', {
-        this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
-          class: this.config.classNames.poster,
+      });
-        });
 
-        this.elements.wrapper.appendChild(this.elements.poster);
+      this.elements.wrapper.appendChild(this.elements.poster);
-      }
     }
 
     if (this.isHTML5) {

src/js/plugins/vimeo.js

@@ -114,10 +114,10 @@ const vimeo = {
     // Inject the package
     const { poster } = player;
     if (premium) {
-      iframe.setAttribute('poster', poster);
+      iframe.setAttribute('data-poster', poster);
       player.media = replaceElement(iframe, player.media);
     } else {
-      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, poster });
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
     }

src/js/plugins/youtube.js

@@ -124,7 +124,7 @@ const youtube = {
     // Get poster, if already set
     const { poster } = player;
     // Replace media element
-    const container = createElement('div', { id, poster });
+    const container = createElement('div', { id, 'data-poster': poster });
     player.media = replaceElement(container, player.media);
 
     // Id to poster wrapper

src/js/plyr.js

@@ -886,7 +886,7 @@ class Plyr {
       return null;
     }
 
-    return this.media.getAttribute('poster');
+    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
   }
 
   /**

src/js/ui.js

@@ -170,12 +170,7 @@ const ui = {
     }
 
     // Set property synchronously to respect the call order
-    this.media.setAttribute('poster', poster);
+    this.media.setAttribute('data-poster', poster);
-
-    // HTML5 uses native poster attribute
-    if (this.isHTML5) {
-      return Promise.resolve(poster);
-    }
 
     // Wait until ui is ready
     return (