Question

I have an issue with the html5 video controls capturing any actions happening on top of them in iOS, which is interfering with a modal window I need to display on top of the video.

I’m trying to customise the modal itself, but can’t seem to get it to work. Basically, when the modal opens, I need to do:

var video = document.getElementById("videocontainer");                      
video.removeAttribute("controls");              

And when the modal closes, I need to add the controls back again:

var video = document.getElementById("videocontainer");
video.setAttribute("controls","controls");

But I can’t seem to get it to work. Here’s the code for the relevant part of the modal window:

//Entrance Animations
function openModal() {
    modalBG.unbind('click.modalEvent');
    $('.' + options.dismissmodalclass).unbind('click.modalEvent');
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {
            modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
            modalBG.fadeIn(options.animationspeed/2);
            modal.delay(options.animationspeed/2).animate({
                "top": $(document).scrollTop()+topMeasure,
                "opacity" : 1
            }, options.animationspeed,unlockModal());                   
        }
        if(options.animation == "fade") {
            modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
            modalBG.fadeIn(options.animationspeed/2);
            modal.delay(options.animationspeed/2).animate({
                "opacity" : 1
            }, options.animationspeed,unlockModal());                   
        } 
        if(options.animation == "none") {
            modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
            modalBG.css({"display":"block"});   
            unlockModal()               
        }   
    }
}       

//Closing Animation
function closeModal() {
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "top":  $(document).scrollTop()-topOffset,
                "opacity" : 0
            }, options.animationspeed/2, function() {
                modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                unlockModal();
            });                 
        }   
        if(options.animation == "fade") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "opacity" : 0
            }, options.animationspeed, function() {
                modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
                unlockModal();
            });                 
        }   
        if(options.animation == "none") {
            modal.css({'visibility' : 'hidden', 'top' : topMeasure});
            modalBG.css({'display' : 'none'});  
        }               
    }
}

Answer 1

The issue is that the placeholder for the VIDEO tag on a webpage viewed on an iPhone or iPod Touch greedily captures all events even from elements that are on a higher “layer”. This doesn’t happen on the iPad or in a desktop environment.

On the iPhone and iPod Touch the VIDEO tag is effectively just a link to open the device’s native QuickTime app to play the video asset. There is no concept of “controls” within the browser on these devices so adding or removing them won’t do anything.

I’ve had to deal with this very problem at my current company which specializes in online video. The “hacky” way we got around this in the HTML5 version of our player widget was to absolutely position the VIDEO tag with a left style of -2000px (you can choose any suitably large number of pixels that you know your VIDEO tag will never match in width) when the widget detects that the user is using an iPhone or iPod Touch.

Since the VIDEO tag itself has nothing to do with how the user will view the video asset and we use a “poster” image inline with where the VIDEO tag normally shows up the user is none the wiser about where the VIDEO tag actually is (and wouldn’t really care, anyway).