feat(time): add video start time attr (justinribeiro#6)

cshawaus · Nov 26, 2019 · aa68aae · aa68aae
1 parent de1d204
commit aa68aae
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@
 - It's responsive 16:9
 - It's accessible via keyboard and will set ARIA via the `videotitle` attribute
 - It's locale ready; you can set the `videoplay` to have a properly locale based label
+- Set the `start` attribute to start at a particular place in a video
 - You can set `autoload` to use Intersection Observer to load the iframe when scrolled into view.
 - Loads placeholder image as WebP with a Jpeg fallback
 
@@ -84,6 +85,13 @@ Height and Width are responsive in the component.
 </div>
 ```
 
+## Set a video start time
+
+```html
+<!-- Start at 5 seconds -->
+<lite-youtube videoid="guJLfqTFfIw" start="5"></lite-youtube>
+```
+
 ## AutoLoad with IntersectionObserver
 
 Uses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.

diff --git a/demo/index.html b/demo/index.html
@@ -1,8 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
+    />
     <title>lite-youtube demo</title>
     <script type="module" src="../lite-youtube.js"></script>
     <style>
@@ -41,7 +44,10 @@ <h3>Add Video Title</h3>
 
 &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; videotitle=&quot;This is a video title&quot;&gt;&lt;/lite-youtube&gt;
     </pre>
-    <lite-youtube videoid="guJLfqTFfIw" videotitle="This is a video title"></lite-youtube>
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+      videotitle="This is a video title"
+    ></lite-youtube>
 
     <h3>Change "Play" for Locale</h3>
     <pre>
@@ -52,7 +58,11 @@ <h3>Change "Play" for Locale</h3>
    videotitle=&quot;Mis hijos se burlan de mi espa&ntilde;ol&quot;&gt;
 &lt;/lite-youtube&gt;
     </pre>
-    <lite-youtube videoid="guJLfqTFfIw" videoplay="Mirar" videotitle="Mis hijos se burlan de mi español"></lite-youtube>
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+      videoplay="Mirar"
+      videotitle="Mis hijos se burlan de mi español"
+    ></lite-youtube>
 
     <h3>Style It</h3>
     <p>Height and Width are responsive in the component.</p>
@@ -65,6 +75,15 @@ <h3>Style It</h3>
       <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
     </div>
 
+    <h3>Set video start time</h3>
+    <pre>
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; start=&quot;5&quot;&gt;&lt;/lite-youtube&gt;
+    </pre>
+    <div>
+      <lite-youtube videoid="guJLfqTFfIw" start="5"></lite-youtube>
+    </div>
+
     <div id="bigBlock">
       Scroll down to trigger autoLoad()
     </div>
@@ -73,7 +92,10 @@ <h3>AutoLoad with IntersectionObserver</h3>
 
 &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; videotitle=&quot;This is a video title&quot; autoload&gt;&lt;/lite-youtube&gt;
     </pre>
-    <lite-youtube videoid="guJLfqTFfIw" videotitle="This is a video title" autoload></lite-youtube>
-
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+      videotitle="This is a video title"
+      autoload
+    ></lite-youtube>
   </body>
 </html>
diff --git a/lite-youtube.js b/lite-youtube.js
@@ -141,6 +141,7 @@ class LiteYTEmbed extends HTMLElement {
     this.videoId = encodeURIComponent(this.getAttribute('videoid'));
     this.videoTitle = this.getAttribute('videotitle') || 'Video';
     this.videoPlay = this.getAttribute('videoplay') || 'Play';
+    this.videoStartAt = this.getAttribute('start') || 0;
     this.autoLoad = this.getAttribute('autoload') === '' ? true : false;
 
     this.__initImagePlaceholder();
@@ -189,7 +190,7 @@ class LiteYTEmbed extends HTMLElement {
     const iframeHTML = `
 <iframe frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
-  src="https://www.youtube.com/embed/${this.videoId}?autoplay=1"
+  src="https://www.youtube.com/embed/${this.videoId}?autoplay=1&start=${this.videoStartAt}"
 ></iframe>`;
     this.__domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
     this.__domRefFrame.classList.add('lyt-activated');