Fixed Destroy / reInit problems

src/index.svelte

@@ -1,15 +1,19 @@
+<script context="module">
+  let YouTubeIframeAPIReady = false;
+</script>
 
 <script>
   let player;
-  import { createEventDispatcher , onMount} from "svelte";
+  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)){
+    if (!isMyScriptLoaded(ytTagUrl)) {
       // 2. This code loads the IFrame Player API code asynchronously.
       var tag = document.createElement("script");
       tag.src = ytTagUrl;
@@ -19,37 +23,48 @@
 
     window.onYouTubeIframeAPIReady = function() {
       //console.log('hello')
-        window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
+      window.dispatchEvent(new Event("YouTubeIframeAPIReady"));
-      }
+    };
 
-      window.addEventListener("YouTubeIframeAPIReady", function(){
+    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");
-function isMyScriptLoaded(url ="") {
+    for (var i = scripts.length; i--; ) {
-    var scripts = document.getElementsByTagName('script');
-    for (var i = scripts.length; i--;) {
       if (scripts[i].src == url) return true;
     }
     return false;
-}
-
-  function onPlayerStateChange({data}){
-    dispatch("StateChange",data)
   }
-  export function playVideo(){
+
-    player.playVideo()
+  function onPlayerStateChange({ data }) {
+    dispatch("StateChange", data);
+  }
+  export function playVideo() {
+    player.playVideo();
   }
 </script>
-<div id={divId}></div>
+
+<div class="yt-component">
+  <div id={divId} />
+</div>