I have an Youtube iframe on my website and when I click it to play, I want to make it full screen.
Its working well exept from one detail. When the video is being played in full screen, I cant click the button to make the video small again, as the button appear as its still in small size. Please fell free to sujest other approaches instead of the js I coded.

let player; 

document.querySelector('.youtube-thumbnail').addEventListener('click', function () {
  const videoId = this.getAttribute('data-video-id');
  const container = this.parentNode;

  // Replace the thumbnail with the YouTube iframe
  container.innerHTML = `
    <div id="youtube-player"></div>
  `;

  // Initialize YouTube Player API
  player = new YT.Player('youtube-player', {
    height: '100%',
    width: '100%',
    videoId: videoId,
    playerVars: {
      rel: 0, // Disable showing related videos
      modestbranding: 1, // Disable YouTube logo
    },
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  });

  container.classList.remove('inactive'); // Remove 'inactive' when the video loads
  container.classList.add('active');     // Add 'active' class
});

function onPlayerReady(event) {
  // Automatically start video playback and go fullscreen
  const container = document.querySelector('.youtube-container');
  event.target.playVideo();

  // Enter fullscreen mode
  enterFullscreen(container);
}

function onPlayerStateChange(event) {
  const container = document.querySelector('.youtube-container');

  if (event.data === YT.PlayerState.PLAYING) {
    // Video is playing: ensure 'inactive' is removed
    container.classList.remove('inactive');
  } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
    // Video is not playing: ensure 'inactive' is added
    container.classList.add('inactive');
  }
}

// Handle fullscreen functionality
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen(); // For Safari
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen(); // For IE/Edge
  }
}

// Exit fullscreen when needed
function exitFullscreen() {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen(); // For Safari
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen(); // For IE/Edge
    }
  }
}

// Listen for fullscreen changes
document.addEventListener('fullscreenchange', function () {
  const container = document.querySelector('.youtube-container');
  if (!document.fullscreenElement) {
    // Fullscreen mode exited
    container.classList.add('inactive');
  }
});

// Load YouTube Iframe API script
const script = document.createElement('script');
script.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(script);

// Add a button to toggle fullscreen manually
document.querySelector('.youtube-container').addEventListener('click', function (e) {
  const container = this;
  if (document.fullscreenElement) {
    exitFullscreen(); // Exit fullscreen
  } else {
    enterFullscreen(container); // Enter fullscreen
  }
});