Poster image fix (fixes #1763)

sampotts · Apr 19, 2020 · 145f2ae · 145f2ae
1 parent 9c7e429
commit 145f2ae
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -131,13 +131,12 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
         </div>
       </header>
       <main>
-        <!-- style="--plyr-color-main: #47bb4d; --plyr-video-control-background-hover: var(--plyr-color-main); " -->
-        <div id="container" style="--plyr-color-main: #1ac266;">
+        <div id="container">
           <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 -->

diff --git a/src/js/media.js b/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
-      if (this.isEmbed) {
-        this.elements.poster = createElement('div', {
-          class: this.config.classNames.poster,
-        });
-
-        this.elements.wrapper.appendChild(this.elements.poster);
-      }
+      // Poster image container
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
+      });
+
+      this.elements.wrapper.appendChild(this.elements.poster);
     }
 
     if (this.isHTML5) {

diff --git a/src/js/plugins/vimeo.js b/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);
     }

diff --git a/src/js/plugins/youtube.js b/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

diff --git a/src/js/plyr.js b/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');
   }
 
   /**

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