HTML5 video doesn't go fullscreen on iPad

Question

I've set up a HTML5 video on my website here.

It works perfectly on every (tested) device, except iPad. Namely, the fullscreen button doesn't work and the video doesn't go fullscreen.

Any idea on the reason why?

Should I use webkitbeginfullscreen? Or use ontouchstart insted of click?

JS:

window.onload = function() {

// Video
var video = document.getElementById("video");

// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");

// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");


[...]

// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // Chrome and Safari
    }
});


[...]

}