Have to fire click event twice to trigger full screen mode on ipad

Question

I have a click event that calls the following code:

$('#video-overlay').on('click', '.media-thumb', function(e){
        $('.video-file')[0].play();
    $('.video-file')[0].webkitEnterFullscreen();
    e.preventDefault();
    });

In my chrome browser this works fine but on ipad i have to click .media-thumb twice to actually get to fullscreen mode, testing on ipad2 v:iOS5. Can anyone offer some light on how I can resolve this so .play() and .webkitFullscreen() get called together?

Answer 1

Have you tried using touchstart?

$('#video-overlay').on('click touchstart', '.media-thumb', function(e) {
    e.preventDefault();
    $('.video-file')[0].play();
    $('.video-file')[0].webkitEnterFullscreen();
});