Question

I want to read the div with class “yturl” and replace to iframe from youtube.

Why does my source code not working?

I have following source code:

HTML:

<div class="yturl">http://www.youtube.com/watch?v=mwVuURFNX0E</div>

JS:

$("div.yturl").each(function(){
    var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
    var youtubeurl = $(this).text();
    var regexyoutubeurl = youtubeurl.match(regex);
    if (regexyoutubeurl) {
        $(this).html("<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/"+regexyoutubeurl[2]+" frameborder=\"0\" allowfullscreen></iframe>");
    }
});

Answer 1

It’s not working because of a typo you’ve made.

Your code generated following html code (try to find missing quotation mark here):

<iframe width="420" height="315" src="http://www.youtube.com/embed/mwVuURFNX0E frameborder=" 0"="" allowfullscreen=""></iframe>

Corrected JavaScript code:

$("div.yturl").each(function(){
    var regex = /(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/;
    var youtubeurl = $(this).text();
    var regexyoutubeurl = youtubeurl.match(regex);
    if (regexyoutubeurl) {
        $(this).html("<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/"+regexyoutubeurl[2]+"\" frameborder=\"0\" allowfullscreen></iframe>");
    }
});

I suggest you to use Firebug or Webkit Web Inspector to see the code you generate dynamically.