HTML5 Video Player with poster or custom poster

HTML

<h2>With poster</h2>

<video src="http://vjs.zencdn.net/oceans-clip.mp4" poster="http://www.migu-music.com/img/play.png" controls>
  Your browser does not support the <code>video</code> element.
</video>

<h2>With custom image overlay</h2>
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

<img src="http://www.migu-music.com/img/play.png" alt="">

CSS

video {
    width: 200px;
    height: 200px;
    margin-right: 100px;
}

img {
    position: absolute;
}

JavaScript

$(document).ready(function() {
    // With poster
    $('video:first').click(function(){
        $(this).get(0).play();
    });
    
    
    // With custom image overlay
    $('img').css($('video:last').position())
        .width($('video:last').width())    
        .height($('video:last').height())
        .click(function() {
            $(this).hide();
            $('video:last').get(0).play();
        });
});