How do i use the js code from https://developers.google.com/youtube/iframe_api_reference in svelte? Running the code in a script tag like their snippet seems to behave differently to running it in svelte script block. Namely it doesnt recognise "YT" that is being loaded from the iframe api. The html code given as is works, but i want to be able to access the player to change the video id, check the current time etc, inside my svelte script tag.
The given youtube code is:
<!DOCTYPE html><html><body><!-- 1. The <iframe> (and video player) will replace this <div> tag. --><div id="player"></div><script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: {'playsinline': 1 }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); }</script></body></html>