Replacing youtube image placeholders to video

Question

I have a jquery function which replaces a Link within two values with an image for e.g

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

will be output as

<div class="comment"><img width="420" height="315" src="http://i4.ytimg.com/vi/T1hf4B5pyjQ/hqdefault.jpg"></img>
random text
</div>

with this function below

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
    youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
$(".comment").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeTag, youtubeHTML))
});

what I'm trying to do is onclicking the image replace youtubeHTML with youtubeIFRAME i have tried this below or check it out on JSFIDDLE http://jsfiddle.net/yusaf/uLTzw/28/

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
    youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
    youtubeIFRAME = '<iframe width="420" height="315" 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))
});

$("img").click(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeHTML, youtubeIFRAME))
});

Why are you encapsulating the image with 2 divs? You can style your imgs with `margin` and use also `display: block`. — kubetz, Dec 03 '11 at 02:09
true, it was temporary it will be further improved once i get a solution im really stuck on what to do ive tried alot of things. — Yusaf Khaliq, Dec 03 '11 at 02:13

kubetz · Accepted Answer · 2011-12-04T02:41:50.320

3

The problem is that $1 part inside youtubeHTML which is not allowing the handler to replace the HTML correctly.

One quick solution is to use data attribute on youtubeHTML and store the link also there. Then simply replace the $1 inside the youtubeIFRAME with the value of that data attribute.

Here is the snippet.

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/;
var youtubeHTML = '<img width="420" data-address="$1" height="315" class="youtube" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
var youtubeIFRAME = '<iframe width="420" height="315" 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));
});

$("img.youtube").click(function(){
    var $this = $(this);   
    $this.replaceWith(youtubeIFRAME.replace("$1", $this.attr("data-address")));
});

EDIT: In case anyone is interested in a way how to write some kind of short "click here" text over the placeholder images have a look here.

edited Dec 04 '11 at 02:41

answered Dec 03 '11 at 02:20

kubetz

8,485
1
22
27

is there a way of returning from the Iframe back to the image placeholder i have tried but i can't seem to get it right. for eg http://jsfiddle.net/yusaf/uLTzw/161/ – Yusaf Khaliq Dec 04 '11 at 16:28
@Yusaf: You have a few errors there. **1)** `.closevid` spans don't exists at the time you are trying to append click handlers. **2)** `$this` in `.closevid` is referencing to `span` and not to `iframe`. **3)** `replace(youtubeHTML, youtubeIFRAME)` won't do anything because the HTML part contains chars `$1` which cannot be found in HTML. Try **[THIS](http://jsfiddle.net/dzejkej/uLTzw/163/)** ugly solution :). – kubetz Dec 04 '11 at 20:06
You have been really helpful and i am stuck with this http://stackoverflow.com/questions/8378575/get-string-between-two-strings-using-jquery could you help me find a solution? – Yusaf Khaliq Dec 04 '11 at 21:49

Replacing youtube image placeholders to video

1 Answers1