Question

I must place a <video> element in a web page. When accessed from the ipad, the page displays a black placeholder until the visitor hits the play button.

Is it possible to make it white, like one would normally do “background-color: white” in css?

edit: A ‘hack’ to work this around: Cover the video with an opaque .shield layer and have a .play button to start the vid.

        $('#intro_video .play').selectable({

            start: function(){

                $('#intro_video .play').fadeOut();
                $('#vid').get(0).play();

                setTimeout(function(){

                    // See HACK03
                    $('#intro_video .shield').fadeOut('slow');
                }, 200);
            }       
        });

Can be nice to wrap inside a browser check to only affect mobile Safari:

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { ... }

Thanks,

Answer 1

You could put an element over the top that has an image of a play button, and script it to disappear on touch. Not so elegant maybe, but it works.