Jquery - Youtube link to embedded

Question

Trying to turn youtube links to embeded, but my jquery doesnt seem to grab the video ids from the links

My JQuery:

$('.a').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,'<iframe width="150" height="150" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});

My HTML:

<div class="a">http://www.youtube.com/watch?v=w_yudtBvhCsc</div>
<div class="a">http://www.youtube.com/watch?v=w_yudtBvhCsd</div>

Im clueless...

Use `embed` or `object` http://www.w3schools.com/html/html_object.asp — Dom, Feb 15 '13 at 22:44
@Dom Just so you know, w3schools is frowned upon here. Use MDN instead: https://developer.mozilla.org/ — Kevin Boucher, Feb 15 '13 at 22:46

score 1 · Accepted Answer · answered Feb 15 '13 at 22:58

1

You can just use split..

$('.a').html(function(i,v){
    var id = v.split('watch?v=')[1]; // get the id so you can add to iframe
    return '<iframe width="150" height="150" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
});

http://jsfiddle.net/nzvYv/

answered Feb 15 '13 at 22:58

wirey00

33,517
7
54
65

Thats very strange. As soon as I fiddle with it, it stops working... On another note, If I hardcode id, itll work just fine, but it doesnt grab the id from the links... im very confused – Jeft Lebowski Feb 15 '13 at 23:17
See link: http://jsfiddle.net/T6Nja/ – Jeft Lebowski Feb 15 '13 at 23:22

Jquery - Youtube link to embedded

1 Answers1