jquery - 如何使用 jQuery 从 URL 显示来自 youtube 的视频？

Question

我想阅读带有“yturl”类的 div 并从 youtube 替换为 iframe。

为什么我的源代码不起作用？

我有以下源代码：

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

由于您犯了一个错字，它无法正常工作。

您的代码生成以下 html 代码（尝试在此处查找缺少的引号）：

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

更正的 JavaScript 代码：

$("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>");
    }
});

我建议您使用 Firebug 或 Webkit Web Inspector 来查看您动态生成的代码。