Would it be possible to "hide" a video behind an image?

Question

Essentially, on page load, I want a video to be hidden behind an image (I guess this can be done with positioning divs).

I would want the video to begin to play when a user clicks on the image the video is hidden behind. This should be possible with a bit of JavaScript/CSS.

What I'm really asking is does anyone know of any examples of this, or would it be possible with some jQuery/Mootools extension...? I would prefer not to use Flash so it works on iPhone/iPad.

Thanks

Answer 1

This is normally done when embedding Quicktime movies. It can be done directly with the video if you are able to set its poster frame. It is also commonly done by placing an image on the screen in the same place as the video and switching between them. The code could look something like this.

HTML

...

<embed id="video" style="display: none;">...<embed>

<img id="poster" onclick="switchToVideo()">

...

JS

function switchToVideo(){

document.getElementById('video').style.display = "block";

document.getElementById('poster').style.display = "none";

document.getElementById('video').Play();

}

Answer 2

As you described (I don't know the exact syntax), just place an image with a higher z-level over anything you want to hide and handle an onClick method for it in JavaScript.

Answer 3

In order for stacking to work with videos you will need to add the wmode variable to the object/embed. Also, to stack you will need to use position: absolute on the element that you want to place on top of the other. Contain them both in a relative container and make the z-index higher on the one that needs to go above.

Here is an example of adding wmode to the video:

<object width="400" height="300">
    <param name="movie" value="" />
    <param name="wmode" value="transparent">
    <!--[if !IE]>-->
    <embed src="" width="400" height="300" wmode="transparent" menu="false">
    <!--<![endif]-->
</object>