jquery - 如何从图片缩略图源获取YouTube视频ID，并将其设置为iframe？

Question

因此，如果图片标签是

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>

我不知道如何从缩略图src中提取YouTube视频ID( LL0Y4MZ45bo)，然后将其应用于iframe。

目前我有100％的工作，这将src应用于iframe。但是我不知道该怎么办，是从img标签中获取ID(在这种情况下为 LL0Y4MZ45bo)，并将其添加到YouTube嵌入的src http://www.youtube.com/embed/ LL0Y4MZ45bo中

<iframe src="" class="youtubeiframe"></iframe>

<script>
$(".youtubeiframe").attr({ 
  src: "http://www.youtube.com/embed/VIDEO-ID-EXTRACTED-FROM-THUMBNAIL-SRC",
});
</script>

那么如何从img中提取ID并应用于iframe src？

Answer 1

这提取了YouTube ID using a Regular Expression，我假设它是最少11个字符的，因为first YouTube Video ID有11个字符。

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>
<iframe src="" class="youtubeiframe"></iframe>

<script>
    $(function (){
        var youtubeid = $(".youtubeimg").attr("src").match(/[\w\-]{11,}/)[0];
        $(".youtubeiframe").attr({ 
              src: "http://www.youtube.com/embed/" + youtubeid,
        });
    });
</script>

此方法有效，但是 YouTube Player API可能会为您提供更稳定的加载iFrame的解决方案，以后一旦它变得稳定，我会推荐 YouTube iFrame API