CUSTOM Video Player API question - video does not display

Hi Everyone

Trying to create a custom video player using the API, and I can get the player to show up, but no video, no logo overlay. I also want to add a custom thumbnail. yes, there is also a js file that will count viewers, not even ready to test that yet.
Can someone take a look and tell where I am foo-barred?

Thanks In Advance

<!DOCTYPE html>
    <title>My Video Player with Counter EDITED</title>
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Cloudflare Stream API Example ARCHIVED VIDEO</title>
    /* CSS to position the logo in the top right corner of the video player */
    .logo {
      position: absolute;
      top: 10px;
      right: 10px;
	<script src="ViewerCount.js"></script>
  <video id="video-player" controls></video>
    const STREAM_API_URL = '{accountid}/stream';
    const VIDEO_ID = 'VIDEO ID HERE';

    const fetchVideo = async () => {
      const response = await fetch(`${STREAM_API_URL}/videos/${VIDEO_ID}`, {
        headers: {
          'Authorization': `Bearer ${STREAM_API_TOKEN}`
      if (!response.ok) {
        throw new Error(`Failed to fetch video: ${response.status}`);
      const data = await response.json();
      // get the video URL
      const videoUrl = data.result.playback.hls;
      // get the thumbnail URL
      const thumbnailUrl = data.result.thumbnail_url;
      // create an HTML video element
      const videoElement = document.getElementById('video-player');
      // set the video source
      videoElement.src = videoUrl;
      // set the thumbnail as the poster image
      videoElement.poster = thumbnailUrl;
      // create an HTML image element for the logo
      const logoElement = document.createElement('img');
      // set the logo image source
      logoElement.src = '';
      // add a class to the logo element for positioning
      logoElement.className = 'logo';
      // add the logo to the video player
      videoElement.parentNode.insertBefore(logoElement, videoElement);