i tried to use fullscreen api in javascreen to customize my own videoplayer but when i click on the fullscreen icon and then fullscreen mode turns on , my video doesn't show properly , it shows like croped video or half video... and this is my code :

let playerarea = document.querySelector(".myplayer");
let fullscreenbtn = buttonsarea.querySelector(".fullscreen");

fullscreenbtn.addEventListener("click" , function(){
  if(!document.fullscreenElement){
    playerarea.requestFullscreen();
      } else if(document.exitFullscreen){
    document.exitFullscreen();
      }})

and this is my video picture after fullscreen : Image