How to open fullscreen video on tap for mobile browsers

Question

I figured out how to make a video full screen on click for desktop devices, however, the same code doesn't work on mobile devices. How can I make it work for mobile screens as well? This is my js code:

<script>
    var myVideo = document.getElementById('videoplay');
    myVideo.addEventListener('click', function () {
    if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    }
    else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    }
    else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    }
    else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
    }
    myVideo.play();
}, false);
</script>

Answer 1

The fullscreen API is not supported for all mobile devices. https://caniuse.com/#feat=fullscreen

You can use Screenfull to avoid all the checks and complexities to handle the fullscreen experience. It exposes a property isEnabled which tells you if you are allowed to enter fullscreen. You can request fullscreen based on its value.

Answer 2

Maybe you got a 'playsinline' in your Videotag? Just remove it

myVideo.removeAttribute('playsinline');