JQuery, HTML: Youtube player with preview image

gistfile1.js

$(".videobox").click(function() {

        /* html
        *   <div class="videobox" id="youtube-id">
        *       <img src="previewimage.jpg" />
        *   </div>
        */
        
        console.log('clicked' + $(this).attr('id'));

        // now put an iframe inside of this div "videobox"
        var iframe = "<iframe />";
        var id = $(this).attr('id'); // the youtube video id

        var url = "http://www.youtube.com/embed/" + id + "?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1";

        var width = 690; // set width of player
        var height = 393;
        var frameborder = 0;

         $(iframe, {
            name: 'videoframe',
            id: 'videoframe',
            src: url,
            width: width,
            height: height,
            frameborder: frameborder,
            class: 'youtube-player',
            type: 'text/html',
            allowfullscreen: true
        }).css({'position': 'absolute', 'top': '0', 'left': '0'}).appendTo(this);

        $(this).find('img').fadeOut(function() { $(this).remove();
    });
});