From 145f2ae24fc2177cd4b778ccdb9f7a6c46c3ba60 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 19 Apr 2020 20:06:58 +1000
Subject: [PATCH] Poster image fix (fixes #1763)

---
 demo/index.html           |  5 ++---
 src/js/media.js           | 12 +++++-------
 src/js/plugins/vimeo.js   |  4 ++--
 src/js/plugins/youtube.js |  2 +-
 src/js/plyr.js            |  2 +-
 src/js/ui.js              |  7 +------
 6 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 75786c32..777611d9 100644
--- a/demo/index.html
+++ b/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" 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
index 936b4365..4584fea3 100644
--- 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,
-        });
+      // Poster image container
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
+      });
 
-        this.elements.wrapper.appendChild(this.elements.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
index 392512ca..d098fe96 100644
--- 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
index 4de46395..89a75d89 100644
--- 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
index c755e2be..9b18bc35 100644
--- 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
index 99faa9b8..c7553c72 100644
--- 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 (