Fix picture duplication

- Fix #3 - when element is moved it is processed again which results in duplicating children
- Fix existing `.lyt-poster-container` not being respected

dist/lite-yt-embed.d.ts

@@ -39,6 +39,7 @@ declare class LiteYTEmbed extends HTMLElement {
     jpg: string;
     webp: string;
     api?: YT.Player;
+    private isInitialized?;
     private playLabelText;
     private posterEl?;
     private static checkWebpSupport;

dist/lite-yt-embed.js

@@ -66,6 +66,12 @@ class LiteYTEmbed extends HTMLElement {
      * See: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
      */
     connectedCallback() {
+        // connectedCallback may be called once the element is no longer connected, use Node.isConnected to make sure
+        if (!this.isConnected)
+            return;
+        // make sure that the element is not being processed more than once
+        if (this.isInitialized === true)
+            return;
         // init global config object if it doesn't exist
         window.LiteYTEmbedConfig = window.LiteYTEmbedConfig ?? {};
         this.videoId = this.getAttribute('videoid') ?? '';
@@ -83,7 +89,7 @@ class LiteYTEmbed extends HTMLElement {
                 titleEl.className = 'lyt-title';
                 this.append(titleEl);
             }
-            if ((titleEl.textContent ?? '') !== '') {
+            if ((titleEl.textContent ?? '') === '') {
                 const titleTextEl = document.createElement('span');
                 titleTextEl.textContent = this.playLabelText;
                 titleEl.append(titleTextEl);
@@ -97,7 +103,7 @@ class LiteYTEmbed extends HTMLElement {
             playBtnEl.className = 'lyt-playbtn';
             this.append(playBtnEl);
         }
-        if ((playBtnEl.textContent ?? '') !== '') {
+        if ((playBtnEl.textContent ?? '') === '') {
             const playBtnLabelEl = document.createElement('span');
             playBtnLabelEl.className = 'lyt-visually-hidden';
             playBtnLabelEl.textContent = this.playLabelText;
@@ -122,6 +128,7 @@ class LiteYTEmbed extends HTMLElement {
                 window.LiteYTEmbedConfig.forceApi ??
                     (navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'));
         }
+        this.isInitialized = true;
     }
     /**
      * Tries to add iframe via DOM manipulations or YouTube API
@@ -164,19 +171,19 @@ class LiteYTEmbed extends HTMLElement {
     // Adds JPG (+ WebP) poster image
     addPoster() {
         // TODO: Add fallback for progressively enhanced videos as well
-        if (this.querySelector('.lyt-preview-container') != null) {
-            // Preview was added manually, don't override
+        if (this.querySelector('.lyt-poster-container') != null) {
+            // Poster was added manually, don't override
             return;
         }
         this.size = this.getAttribute('size') ?? window.LiteYTEmbedConfig?.size ?? 'hq';
-        // validate preview size
+        // validate poster size
         if (!['mq', 'hq', 'sd', 'maxres'].includes(this.size))
             return;
-        // Custom jpg preview
+        // Custom jpg poster
         this.jpg = this.getAttribute('jpg') ?? '';
         /**
          * 'yes' - default YouTube image
-         * 'no' - typically used if YouTube has no preview for this video
+         * 'no' - typically used if YouTube has no poster for this video
          * Anything else is treated like a custom image
          */
         this.webp = this.getAttribute('webp') ?? window.LiteYTEmbedConfig?.webp ?? 'yes';