Youtube API Playlist shuffle

the homepage of www.rupertlaycock.com has a div called bgvid. It's a full screen youtube player that is supposed to play a random video from my playlist. However the code I have fails on first load in any browser, 1-3 refreshes fixes it though and I cannot figure out why.

Here's the existing code

<script>    // Load the YouTube iFrame API asynchronously    const tag = document.createElement('script');    tag.src = 'https://www.youtube.com/iframe_api';    const firstScriptTag = document.getElementsByTagName('script')[0];    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    // YouTube player settings    let player;    function onYouTubeIframeAPIReady() {        player = new YT.Player('bgvid', {            width: '100%',            height: '100%',            videoId: '', // This will be set dynamically            playerVars: {                autoplay: 1,                controls: 0,                modestbranding: 1,                loop: 1,                playlist: '', // This will be set dynamically                enablejsapi: 1,                fs: 0,                showinfo: 0,                autohide: 1,                rel: 0,                cc_load_policy: 0,                iv_load_policy: 3,                disablekb: 1,                mute: 1 // Set the video to mute            },            events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange            }        });    }    function onPlayerReady(event) {        // Replace 'YOUR_PLAYLIST_ID' with your actual YouTube playlist ID        const playlistId = 'PLBxa5RWLF0lWmqWYGFD8pZy6DHlmf4xU7';        // Fetch playlist items and shuffle them        fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=AIzaSyC...`)            .then(response => response.json())            .then(data => {                const items = data.items;                shuffle(items);                // Extract video IDs from playlist items                const videoIds = items.map(item => item.snippet.resourceId.videoId);                // Set the playlist and load a random video                player.loadPlaylist(videoIds);                const randomIndex = Math.floor(Math.random() * videoIds.length);                player.playVideoAt(randomIndex);            });    }    function onPlayerStateChange(event) {        // Handle video state changes here if needed    }    // Shuffle array function    function shuffle(array) {        for (let i = array.length - 1; i > 0; i--) {            const j = Math.floor(Math.random() * (i + 1));            [array[i], array[j]] = [array[j], array[i]];        }    }</script>

I've gone around and around in circles with ChatGPT as i'm no script expert.