Replace Image With A Video Embeded

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

Solution 1:

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

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

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

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

Solution 2:

There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.