OK, so the deal is I've started making a little videoplayer, that works by clicking a div with an image, expanding the div and the image, and then exchanges the image with a html5-videotag. the code is as below.

(It's very early on, so i know theres a lot that need improving, as in not using javascript to set styles and so on, but nevertheless, any insigts and tips are welcome, besides the answer to the main question)

/*Begin Expander*/
var $videoplayer = $('<video width="640" height="360" preload="none" controls="" tabindex="0" style="position: relative;"><source type="video/mp4" src="/restalive/movies/big_buck_bunny.mp4"></source><source type="video/ogg" src="/restalive/movies/big_buck_bunny.ogv"></source></video>').appendTo('body');

$videoplayer.hide();


$(".ExpandVideo").each(function(i){

    var $trigger = $(this);
    var $image = $trigger.find("img");

    $image.css({
          "width" : "100%"
         ,"height" : "auto"


    })

    $trigger.css({
             "display" : "block"
            ,"overflow" : "hidden"
            ,"width" : "200px"
            ,"float" : "left"
    });

    $trigger.bind("click", function(e){

        $trigger.animate({"width" : "640px"}, "fast", function(){

            $image.replaceWith($videoplayer);
            $videoplayer.show();
            $videoplayer.attr("id", "video" + i);

            var video = document.getElementById("video" + i);
            video.play();


        })

    })



});

However, the main problem is that when i've fired of the video like this (video.play()), the native controls stop working, i can no longer pause the video, even though the controls are there, and clickable, the video just starts playing immidiatley again when i trie to pause it.

Which is a shame, because i want to use the native controls for simplicity.