如何切换点击来隐藏和显示视频播放器的UI？

<div id="video-container">
  <video id="video-player" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

#video-container {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}

var videoContainer = document.getElementById('video-container');
var videoPlayer = document.getElementById('video-player');

videoContainer.addEventListener('click', function() {
  videoPlayer.classList.toggle('hide-ui');
});

.hide-ui::-webkit-media-controls {
  display: none !important;
}