replace image with a video embeded

Question

Hi I'm trying to modify a web page so that it loads faster. Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page). I think I've seen this before, but can't find it anywhere anymore! right now the code to embed I use is:

<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>

Thanks

Solution

Quick and dirty: you could just set the embed code as a global variable somewhere:

<script type="text/javascript">
    var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>

Then put the image in a container div and replace the container's innerHTML onclick:

<div id="videocontainer">
    <img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>

Comments

[MichalB]

I had the similar issue and tried to run it, however, it does not work. The clicking on the image does not cause any event. What can be the problem?

[Mark Bell]

Just about anything could be the problem when the error description is so vague... are your HTML element IDs the same as those above? Do you get any script errors in your browser's JavaScript console when you click the image? Please post a new question, including the exact HTML/JS code you are using (along with any JavaScript error messages)—that way we will have a much better chance of figuring out your problem.