paulirish · codepuncher · Nov 29, 2021 · Jan 28, 2022 · Jan 28, 2022 · Jan 28, 2022
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+
+[src/]
+indent_size = 4
+indent_style = space
+insert_final_newline = true
diff --git a/readme.md b/readme.md
@@ -60,9 +60,9 @@ Use this as your HTML, load the script asynchronously, and let the JS progressiv
 
 ```html
 <lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
-  <button type="button" class="lty-playbtn">
+  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
     <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
-  </button>
+  </a>
 </lite-youtube>
 ```
 

diff --git a/src/lite-yt-embed.css b/src/lite-yt-embed.css
@@ -43,6 +43,7 @@ lite-youtube > iframe {
 
 /* play button */
 lite-youtube > .lty-playbtn {
+    display: block;
     width: 68px;
     height: 48px;
     position: absolute;

diff --git a/src/lite-yt-embed.js b/src/lite-yt-embed.js
@@ -58,7 +58,7 @@ class LiteYTEmbed extends HTMLElement {
         // However Safari and Firefox do not successfully track the user gesture of clicking through the creation/loading of the iframe,
         // so they don't autoplay automatically. Instead we must load an additional 300KB (ungz) of JS for the YT Player API
         // TODO: chrome android seems to also need this
-        this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || navigator.userAgent.includes('Firefox');
+        this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || ['Firefox', 'Android'].some(userAgent => navigator.userAgent.includes(userAgent));
     }
 
     // // TODO: Support the the user changing the [videoid] attribute
@@ -109,7 +109,7 @@ class LiteYTEmbed extends HTMLElement {
             var el = document.createElement('script');
             el.src = 'https://www.youtube.com/iframe_api';
             el.async = true;
-            el.onload = _ => {
+            el.onload = () => {
                 YT.ready(res);
             };
             el.onerror = rej;
@@ -131,15 +131,16 @@ class LiteYTEmbed extends HTMLElement {
             videoId: this.videoId,
             playerVars: paramsObj,
             events: {
-                'onReady': event => {
+                onReady: event => {
                     event.target.playVideo();
-                }
-            }
+                },
+            },
         });
     }
 
-    async addIframe(){
+    async addIframe(e){
         if (this.classList.contains('lyt-activated')) return;
+        e.preventDefault();
         this.classList.add('lyt-activated');
 
         const params = new URLSearchParams(this.getAttribute('params') || []);

diff --git a/variants/pe.html b/variants/pe.html
@@ -7,14 +7,14 @@
   <link rel="stylesheet" href="../src/lite-yt-embed.css" />
 </head>
 <body>
-<h1>progressively enhanced</h1>
+<h1>Progressively Enhanced</h1>
 <p>After 2 seconds, the JS is executed and custom element defined.</p>
 <p id="done">...</p>
 
 <lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
-  <button type="button" class="lty-playbtn">
+  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
     <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
-  </button>
+  </a>
 </lite-youtube>
 
 <script>

diff --git a/now.json → vercel.json b/now.json → vercel.json
@@ -2,4 +2,4 @@
   "github": {
     "silent": true
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ @@
       "github": {
         "silent": true
       }
-    }
+    }