How to play video (mp4) fullscreen using html and javascript like youtube?

Question

If you go to m.youtube.com from android using Chrome when you go to a video you see a preview (static image with play button overlay). As you click the image the video starts fullscreen. I wish to do the same.

Answer 1

You need to requestFullscreen() for a given element. You would need to do something like:

var elem = document.getElementById('myvideo');
elem.requestFullscreen();

More about that on https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api and https://stackoverflow.com/questions/6039909/html5-full-screen-video

Let me know if this works for you.

Answer 2

You can refer to the following example for the same. The following example shows a different code for different browsers.

<video controls id="myvideo">
  <source src="video1.mp4"></source>
</video>

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}