HTML5 video full screen not populate on android browser on mobile view

I am trying to open a video in full screen on a mobile browser.
The video is showing just fine, but when I click the "full screen" button on the video, only the sound is playing, without the video nor the controls showing.

Could anyone please help me ?

You can find my HTML code below :

<div class = "container">
<div class = "row">
  <div class = "col-md-12">
    <p class="new-txt-styl-mob">Video Title</p>
    <video class = "ved-sttng-mob" controls id = "control1" src = "video1.mp4" type="video/mp4" >
  </div>
 </div>
</div>

Here is my JavaScript code :

var myVideo;
window.onload = function()
{
  myVideo = document.getElementById("control1");
  myVideo.load();
  myVideo.addEventListener("webkitfullscreenchange", setFullScreenMode);
}

function setFullScreenMode()
{
  if(myVideo.requestFullscreen) {
    myVideo.requestFullscreen();
  } else if (myVideo.webkitRequestFullscreen) {
    myVideo.webkitRequestFullscreen();
  } else if (myVideo.msRequestFullscreen) {
    myVideo.msRequestFullscreen();
  } else if (myVideo.mozRequestFullScreen) {
    myVideo.mozRequestFullScreen();
  }
}

And, finally, my CSS code :

.ved-sttng-mob {
   width: 100%;
   height: auto;
}

.ved-sttng-mob:-webkit-full-screen {
   width: 100%;
   height: auto;
}