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 embed 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

Answer 2

如果你开始研究YouTube API，我认为你可以更容易地做到这一点。

Answer 3

将URL设为数组，然后将第二部分设为最后一部分。例如，这也适用于CSS background-image。

＆＃13;

id = $('div').attr('style').split('/');
id = id[id.length-2];
alert("YouTube ID: " + id);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url('https://img.youtube.com/vi/MHUOty8-Ty0/0.jpg');"></div>

＆＃13;

https://jsfiddle.net/Wobbo/wfyL1hem/7/

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

3 个答案: