Combined solutions

I combined two pull requests:
- paulirish#124
- paulirish#122
- Added also support to WebP.

Author: FANMixco

index.html

@@ -19,6 +19,7 @@ <h3>View isolated demos:</h3>
       <li><a href="./variants/pe.html">lite-youtube-embed - progressively enhanced</a>
       <li><a href="./variants/custom-poster-image.html">lite-youtube-embed - custom poster image</a>
       <li><a href="./variants/params.html">lite-youtube-embed - with parameters</a></li>
+      <li><a href="./variants/multiple-embeds.html">lite-youtube-embed - multiple embeds on same page</a>
       <li><a href="./variants/yt.html">normal youtube embed</a>
     </ul>
   </body>

src/lite-yt-embed.js

@@ -28,7 +28,10 @@ class LiteYTEmbed extends HTMLElement {
          * TODO: Consider using webp if supported, falling back to jpg
          */
         if (!this.style.backgroundImage) {
-          this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
+          this.style = 
+                `background-image: url('https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg');
+                 background-image: -webkit-image-set(url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.webp") 1x, url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg") 1x);
+                 background-image: image-set(url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.webp") type("image/webp"), url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg") type("image/jpeg"));`;
         }
 
         // Set up play button, and its visually hidden label
@@ -44,6 +47,7 @@ class LiteYTEmbed extends HTMLElement {
             playBtnLabelEl.textContent = this.playLabel;
             playBtnEl.append(playBtnLabelEl);
         }
+        playBtnEl.removeAttribute('href');
 
         // On hover (or tap), warm up the TCP connections we're (likely) about to use.
         this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
@@ -52,6 +56,7 @@ class LiteYTEmbed extends HTMLElement {
         // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
         //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
         this.addEventListener('click', this.addIframe);
+        this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || ['Firefox', 'Android'].some(userAgent => navigator.userAgent.includes(userAgent));
     }
 
     // // TODO: Support the the user changing the [videoid] attribute
@@ -95,13 +100,54 @@ class LiteYTEmbed extends HTMLElement {
         LiteYTEmbed.preconnected = true;
     }
 
-    addIframe(e) {
+    fetchYTPlayerApi() {
+        if (window.YT || (window.YT && window.YT.Player)) return;
+
+        this.ytApiPromise = new Promise((res, rej) => {
+            var el = document.createElement('script');
+            el.src = 'https://www.youtube.com/iframe_api';
+            el.async = true;
+            el.onload = () => {
+                YT.ready(res);
+            };
+            el.onerror = rej;
+            this.append(el);
+        });
+    }
+
+    async addYTPlayerIframe(params) {
+        this.fetchYTPlayerApi();
+        await this.ytApiPromise;
+
+        const videoPlaceholderEl = document.createElement('div')
+        this.append(videoPlaceholderEl);
+
+        const paramsObj = Object.fromEntries(params.entries());
+
+        new YT.Player(videoPlaceholderEl, {
+            width: '100%',
+            videoId: this.videoId,
+            playerVars: paramsObj,
+            events: {
+                onReady: event => {
+                    event.target.playVideo();
+                },
+            },
+        });
+    }
+
+    async addIframe(e){
         if (this.classList.contains('lyt-activated')) return;
         e.preventDefault();
         this.classList.add('lyt-activated');
 
         const params = new URLSearchParams(this.getAttribute('params') || []);
         params.append('autoplay', '1');
+        params.append('playsinline', '1');
+
+        if (this.needsYTApiForAutoplay) {
+            return this.addYTPlayerIframe(params);
+        }
 
         const iframeEl = document.createElement('iframe');
         iframeEl.width = 560;

variants/multiple-embeds.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>lite-youtube-embed</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="../src/lite-yt-embed.css" />
+</head>
+<body>
+<h1>multiple embeds</h1>
+
+<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+
+
+<lite-youtube videoid="n57U2_-3NLQ" playlabel="Play: Chrome Dev Summit 2021 recap"></lite-youtube>
+
+
+<script src="../src/lite-yt-embed.js"></script>
+
+  <!-- <script>
+    // Simulate duplicate iframe problem. https://github.com/paulirish/lite-youtube-embed/issues/92
+    document.body.addEventListener('click', e => e.target.click());
+  </script>  -->
+</body>
+</html>

variants/solo.html

@@ -13,9 +13,5 @@ <h1><code>lite-youtube</code> custom element</h1>
 
 <script src="../src/lite-yt-embed.js"></script>
 
-  <!-- <script>
-    // Simulate duplicate iframe problem. https://github.com/paulirish/lite-youtube-embed/issues/92
-    document.body.addEventListener('click', e => e.target.click());
-  </script>  -->
 </body>
 </html>

variants/yt.html

@@ -7,10 +7,10 @@
   </head>
   <body>
 
-    <h3>typical iframe embed</h3>
+    <h1>typical iframe embed</h1>
     <iframe
-      width="560"
-      height="315"
+      width="720"
+      height="405"
       src="https://www.youtube.com/embed/ogfYd705cRs"
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"