Замена youtube спец.кода на изображение и отображение видео при клике

HTML:

<div class="comment">
[youtube]http://www.youtube.com/watch?v=T1hf4B5pyjQ&feature=grec_index[/youtube]
random text
</div>
<div class="comment">
[youtube]http://youtu.be/x8_rqO6i4PY[/youtube]
random text2
</div>

CSS:

body {
    font-family: sans-serif;
}
div.youtube, iframe.youtube {
    display: block;
    margin: 10px;
    width: 420px;
    height: 315px;
    cursor: pointer;
}

div.youtube span {
    background-color: black;
    color: white;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    top: 130px;
    left: 108px;
    padding: 10px;
}

span.close {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
}

jQuery:

var youtubeTag = /\[youtube\]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_\-]+)([a-zA-Z&=;_+0-9*#\-]*?)\[\/youtube\]/;

var youtubeHTML = '<div data-address="$1" class="youtube" style="background: url(http://i4.ytimg.com/vi/$1/hqdefault.jpg)"><span>CLICK HERE</span></div>';

var youtubeIFRAME = '<span class="close">CLOSE</span><iframe data-address="$1" class="youtube" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';

$(".comment").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeTag, youtubeHTML));
});

$(".comment").delegate("div.youtube", "click", function(){
    var $this = $(this);
    $this.replaceWith(youtubeIFRAME.replace(/\$1/g, $this.attr("data-address")));
});

$(".comment").delegate("span.close", "click", function() {
    var $next= $(this).next();
    $next.replaceWith(youtubeHTML.replace(/\$1/g, $next.attr("data-address")));
    $(this).remove();
});

источник кода и демо