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();

}