Example code from Youtube Iframe API is not firing?

I’m trying to recreate Example 1 in YouTube’s own documentation on the YouTube Iframe API but am embedding a playlist as opposed to the single video in their example. However, I am unable to get it to work after much effort.

In YouTube’s example the <iframe> is placed in the page’s html instead of adding an empty <div> element which the player API’s JavaScript code then replaces with an <iframe> element. FYI this example should make the border of the iframe orange when first loaded, and then change colours when played, paused etc.

The iframe code in my page is as follows:

<iframe style="border-radius:12px; border: solid 14px #37474F;" aria-expanded"true" width="100%" height="704" src="https://www.youtube.com/embed/videoseries?enablejsapi=1&si=5tts7pEFZvX3undq&list=PL-Ov8WpjfHfnS90hc8DYyRCfllJkSFtHU&origin=https://www.futureproofpromotions.com/submit-to-futureproof-picks/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

And the script I’ve added to the header is:

var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player_2', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  document.getElementById('player_2').style.borderColor = '#FF6D00';
}

function changeBorderColor(playerStatus) {
  var color;
  if (playerStatus == -1) {
    color = "#37474F"; // unstarted = gray
  } else if (playerStatus == 0) {
    color = "#FFFF00"; // ended = yellow
  } else if (playerStatus == 1) {
    color = "#33691E"; // playing = green
  } else if (playerStatus == 2) {
    color = "#DD2C00"; // paused = red
  } else if (playerStatus == 3) {
    color = "#AA00FF"; // buffering = purple
  } else if (playerStatus == 5) {
    color = "#FF6DOO"; // video cued = orange
  }
  if (color) {
    document.getElementById('player_2').style.borderColor = color;
  }
}

function onPlayerStateChange(event) {
  changeBorderColor(event.data);
}

The script is copied directly from the YouTube Example 1 & all I’ve done is change YouTube’s YT.Player('existing-iframe-example' to YT.Player('player_2'so that it references the iframe on my page.

WordPress has added the ID player_2 so that is why there’s no ID included in my iframe code above.

I have tried adding the script to the footer instead but that didn’t work either?

One thing I’m not sure about is: in the example script there is the line tag.id = 'iframe-demo'; and it doesn’t mention that parameter anywhere in its documentation so I’m not sure what to change it to, or whether I need to? I have tried removing the line (since it’s not included anywhere else in their documentation) and replacing iframe-demo with player_2 but still it doesn’t work.

You can view the page where I am trying to get this example to work here (the Youtube iframe is down the bottom in the middle).

Can anybody spot why the API / script is not firing and suggest a resolution?

Many thanks