Как скрыть элементы управления HTML видеоплеера в режиме полного экрана?

Question

[AlanSalamov]

Есть стандартный плеер с кастомными элементами:

<div class="custom-video-player" style="position:relative;">
  <video id="myVideo" width="320" height="240" controls>
    <source src="/UploadVideos/BMW.mp4" type="video/mp4">
    Ваш браузер не поддерживает тег video.
  </video>
  <button id="playPauseButton" style="position: absolute;bottom:0;left:0;">Воспроизвести</button>
  <input type="range" id="seekBar" value="0">
  <button id="fullscreenButton" style="position: absolute;bottom:0;right:0;">Полный экран</button>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('myVideo');
    var playPauseButton = document.getElementById('playPauseButton');
    var seekBar = document.getElementById('seekBar');
    var fullscreenButton = document.getElementById('fullscreenButton');

    video.removeAttribute('controls'); // Удаляем стандартные элементы controls

    function togglePlayPause() {
      if (video.paused) {
        video.play();
        playPauseButton.textContent = 'Пауза';
      } else {
        video.pause();
        playPauseButton.textContent = 'Воспроизвести';
      }
    }

    playPauseButton.addEventListener('click', togglePlayPause);
    video.addEventListener('click', togglePlayPause);

    video.addEventListener('timeupdate', function() {
      var value = (video.currentTime / video.duration) * 100;
      seekBar.value = value;
    });

    seekBar.addEventListener('input', function() {
      var value = seekBar.value * video.duration / 100;
      video.currentTime = value;
    });

    fullscreenButton.addEventListener('click', function() {
        
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // Chrome and Safari
      }

      
    });
  });
</script>

вот они:


Почему после перехода в полноэкранный режим стандартные элементы появляются а мои пропадают?