1. this is the code to connect to youtube api. I tried forcing it to check full screen to hide but it didnt work.

enter image description here

2. here is the full screen test code

   useEffect(() => {
   const handleFullScreenChange = () => {
   const isFullscreen = !!document.fullscreenElement;
   setIsFullScreen(isFullscreen);
   };

    document.addEventListener('fullscreenchange', handleFullScreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullScreenChange);
    document.addEventListener('mozfullscreenchange', handleFullScreenChange);
    document.addEventListener('msfullscreenchange', handleFullScreenChange);
   
    return () => {
        document.removeEventListener('fullscreenchange', handleFullScreenChange);
        document.removeEventListener('webkitfullscreenchange', handleFullScreenChange);
        document.removeEventListener('mozfullscreenchange', handleFullScreenChange);
        document.removeEventListener('msfullscreenchange', handleFullScreenChange);
    };
   

   }, []);

   useEffect(() => {
   console.log(isFullScreen ? ‘Video is in full screen’ : ‘Video exited full screen’);
   console.log(isFullScreen);

   }, [isFullScreen]);

I want to hide the control bar when it is full screen and show it when it is in normal mode

enter image description here

please help me hide it