Fixed Destroy / reInit problems

src/index.svelte

@@ -1,12 +1,16 @@
+<script context="module">
+  let YouTubeIframeAPIReady = false;
+</script>
 
 <script>
   let player;
   import { createEventDispatcher, onMount } from "svelte";
   const dispatch = createEventDispatcher();
-  let divId = "player_"+parseInt(Math.random() * 100000).toString()
+  let divId = "player_" + parseInt(Math.random() * 100000).toString();
   export let videoId;
-  export let height = '390';
+  export let height = "390";
-  export let width = '640';
+  export let width = "640";
+
   onMount(() => {
     let ytTagUrl = "https://www.youtube.com/iframe_api";
     if (!isMyScriptLoaded(ytTagUrl)) {
@@ -19,26 +23,34 @@
 
     window.onYouTubeIframeAPIReady = function() {
       //console.log('hello')
-        window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
+      window.dispatchEvent(new Event("YouTubeIframeAPIReady"));
-      }
+    };
 
     window.addEventListener("YouTubeIframeAPIReady", function() {
-          console.log('load player..')
+      if (YouTubeIframeAPIReady == false) {
+        // first load of an YT Video on this project
+        YouTubeIframeAPIReady = true; // now the Player can be created
+        createPlayer();
+      }
+    });
+    function createPlayer() {
       player = new YT.Player(divId, {
         height,
         width,
         videoId: videoId,
         events: {
           //'onReady': onPlayerReady,
-                'onStateChange': onPlayerStateChange
+          onStateChange: onPlayerStateChange
+        }
+      });
+    }
+    if (YouTubeIframeAPIReady) {
+      createPlayer(); // if the YT Script is ready, we can create our player
     }
   });
-      })
-
-  })
 
   function isMyScriptLoaded(url = "") {
-    var scripts = document.getElementsByTagName('script');
+    var scripts = document.getElementsByTagName("script");
     for (var i = scripts.length; i--; ) {
       if (scripts[i].src == url) return true;
     }
@@ -46,10 +58,13 @@ function isMyScriptLoaded(url ="") {
   }
 
   function onPlayerStateChange({ data }) {
-    dispatch("StateChange",data)
+    dispatch("StateChange", data);
   }
   export function playVideo() {
-    player.playVideo()
+    player.playVideo();
   }
 </script>
-<div id={divId}></div>
+
+<div class="yt-component">
+  <div id={divId} />
+</div>