diff options
| -rw-r--r-- | demo/index.html | 5 | ||||
| -rw-r--r-- | src/js/media.js | 14 | ||||
| -rw-r--r-- | src/js/plugins/vimeo.js | 4 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 2 | ||||
| -rw-r--r-- | src/js/plyr.js | 2 | ||||
| -rw-r--r-- | src/js/ui.js | 7 |
6 files changed, 13 insertions, 21 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, - }); - - 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 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 ( |