Improvements to http://watkinsfilm.com/embedding-videos/

alternative1.html

<!--
try at http://jsfiddle.net/westonruter/LVpkf/
note use of autoplay=1 argument so that the video starts playing right away
no IDs are used so multiple instances can appear on the same page
note also that the iframe's width and height are automatically made the same as the original image
this is not ideal because we have potentially duplicate JS in each instance of the image/iframe
-->
<img
    src="https://secure-b.vimeocdn.com/ts/283/797/283797216_640.jpg" 
    data-iframe="http://player.vimeo.com/video/41011190?autoplay=1" 
    onclick="
    (function(img){
        var iframe = document.createElement('iframe'); 
        iframe.width = img.width;
        iframe.height = img.height;
        iframe.border = 0;
        iframe.src = img.getAttribute('data-vimeo'); 
        img.parentNode.replaceChild(iframe, img);
    }(this))
    "
>

alternative2.html

<!-- 
try at http://jsfiddle.net/westonruter/e35Hb/
ensure that the JS in alternative2.js gets loaded into the page
this alternative allows the user to open the video in a new tab
it also shows when mouseover that the image links to a video via the hand cursor
the JS applies to any link that contains an image with a data-iframe attribute
-->
<a href="https://vimeo.com/41011190" target="_blank">
    <img src="https://secure-b.vimeocdn.com/ts/283/797/283797216_640.jpg" data-iframe="http://player.vimeo.com/video/41011190?autoplay=1">
</a>

alternative2.js

jQuery(function($){
    $('a:has(img[data-iframe])').click(function (e) {
        var img = $(this).find('img[data-iframe]');
        var iframe = $('<iframe>', {
            src: img.data('iframe'),
            width: img.prop('width'),
            height: img.prop('height'),
            border: 0 // this is better to handle with CSS
        });
        $(this).replaceWith(iframe);
        e.preventDefault(); // ensure the browser doesn't navigate to the link
    });
});

original.html

<script>
iframePostName = '<iframe src="http://player.vimeo.com/video"></iframe>'
</script>
<div id="PostName"><img onclick="document.getElementById('PostName').innerHTML = iframePostName" src="http://sample.com/sample.jpg" alt="" /></div>