fix: intersection observer injection no longer autoplays (justinribei…

…ro#35)
cshawaus · Oct 1, 2021 · 9bec0c9 · 9bec0c9
1 parent 7578b87
commit 9bec0c9
Show file tree

Hide file tree

Showing 2 changed files with 218 additions and 202 deletions.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -194,9 +194,8 @@ export class LiteYTEmbed extends HTMLElement {
         '#jpegPlaceholder',
       )!,
     };
-    this.domRefPlayButton = this.shadowRoot.querySelector<HTMLButtonElement>(
-      '.lty-playbtn',
-    )!;
+    this.domRefPlayButton =
+      this.shadowRoot.querySelector<HTMLButtonElement>('.lty-playbtn')!;
   }
 
   /**
@@ -248,13 +247,16 @@ export class LiteYTEmbed extends HTMLElement {
 
   /**
    * Inject the iframe into the component body
+   * @param {boolean} isIntersectionObserver
    */
-  private addIframe(): void {
+  private addIframe(isIntersectionObserver = false): void {
     if (!this.iframeLoaded) {
+      // Don't autoplay the intersection observer injection, it's weird
+      const autoplay = isIntersectionObserver ? 0 : 1;
       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&${this.params}"
+  src="https://www.youtube.com/embed/${this.videoId}?autoplay=${autoplay}&${this.params}"
 ></iframe>`;
       this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
       this.domRefFrame.classList.add('lyt-activated');
@@ -302,7 +304,7 @@ export class LiteYTEmbed extends HTMLElement {
         entries.forEach(entry => {
           if (entry.isIntersecting && !this.iframeLoaded) {
             LiteYTEmbed.warmConnections();
-            this.addIframe();
+            this.addIframe(true);
             observer.unobserve(this);
           }
         });