added support for video poster

aeroseo · Oct 30, 2019 · cf87dee · cf87dee
1 parent 94b2e3b
commit cf87dee
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -211,6 +211,15 @@ Create _a broken_ picture element structure.
 
 When _lozad_ loads this picture element, it will fix it.
 
+## Example with video
+
+```html
+<video data-poster="images/backgrounds/video-poster.jpeg">
+    <source data-src="video/mov_bbb.mp4" type="video/mp4">
+    <source data-src="video/mov_bbb.ogg" type="video/ogg">
+</video>
+```
+
 ## Example with iframe
 
 ```html

diff --git a/demo/images/backgrounds/video-poster.jpeg b/demo/images/backgrounds/video-poster.jpeg
diff --git a/demo/index.html b/demo/index.html
@@ -258,7 +258,7 @@ <h1>&lt;video> example</h1>
     <div id="video">
       <article class="frame">
           <div class="video-example video-example-2">
-            <video width="560" height="315" controls loop muted class="lozad-picture">
+            <video width="560" height="315" controls loop muted class="lozad-picture" data-poster="images/backgrounds/video-poster.jpeg">
               <source data-src="video/mov_bbb.mp4" type="video/mp4">
               <source data-src="video/mov_bbb.ogg" type="video/ogg">
             </video>

diff --git a/dist/lozad.es.js b/dist/lozad.es.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.14.0 - 2019-10-19
+/*! lozad.js - v1.14.0 - 2019-10-30
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
 
@@ -42,6 +42,10 @@ const defaultConfig = {
       }
     }
 
+    if (element.getAttribute('data-poster')){
+        element.poster = element.getAttribute('data-poster');
+    }
+
     if (element.getAttribute('data-src')) {
       element.src = element.getAttribute('data-src');
     }

diff --git a/dist/lozad.js b/dist/lozad.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.14.0 - 2019-10-19
+/*! lozad.js - v1.14.0 - 2019-10-30
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
 
@@ -48,6 +48,10 @@
         }
       }
 
+      if (element.getAttribute('data-poster')) {
+        element.poster = element.getAttribute('data-poster');
+      }
+
       if (element.getAttribute('data-src')) {
         element.src = element.getAttribute('data-src');
       }

diff --git a/dist/lozad.min.js b/dist/lozad.min.js
diff --git a/src/lozad.js b/src/lozad.js
@@ -37,6 +37,10 @@ const defaultConfig = {
       }
     }
 
+    if (element.getAttribute('data-poster')){
+        element.poster = element.getAttribute('data-poster')
+    }
+
     if (element.getAttribute('data-src')) {
       element.src = element.getAttribute('data-src')
     }