Javascript 全屏隐藏播放器控件

我为我的播放器实现了一些自定义控件，我需要隐藏 当我移动到全屏并显示自定义控件时出现。我怎样才能做到这一点

onFullScreenClick() {
   var elem = document.getElementById('video');

   if (elem.requestFullscreen) {
     elem.requestFullscreen();
   } else if (elem.mozRequestFullScreen) {
     elem.mozRequestFullScreen();
   } else if (elem.webkitRequestFullscreen) {
     elem.webkitRequestFullscreen();
   } else if (elem.msRequestFullscreen) {
     elem.msRequestFullscreen();
   }
}

 <div
    className={'video-player'}
    onMouseEnter={this.enterVideoArea}
    onMouseLeave={this.leaveVideoArea}
  >
    <video
      ref={'video'}
      id={'video'}
      width={'640'}
      className="react-video-player"
      controls={false}
      loop
      autoPlay
      onClick={this.togglePlay}
    />
    <div

onFullScreenClick（）{
var elem=document.getElementById（'video'）；
if（元素请求全屏）{
元素请求全屏（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}else if（elem.msRequestFullscreen）{
elem.msRequestFullscreen（）；
}
}
您可以像这样隐藏视频标签中的所有媒体控件

video::-webkit-media-controls {
  display:none !important;
}

我想，当您使视频元素全屏显示时，任何自定义控件都不会出现（因为它们不是视频元素的子控件）。您可能需要使任何容器元素都可以全屏显示控件。（如果您可以将代码片段扩展为问题的工作示例，那就太好了）