Question

我希望尝试从链接中的YouTube网址中提取ID，并使用该ID将视频的缩略图图像作为背景图像添加到链接中。

这是起点标记：

<a class="video__link" href="https://www.youtube.com/watch?v=TDfVHTtcl7g">
    <span class="icon icon--play"><span class="visually-hidden">Play video on YouTube</span></span>
</a>

我最终的结果是：

<a class="video__link" href="https://www.youtube.com/watch?v=TDfVHTtcl7g" style="background-image: url('http://img.youtube.com/vi/TDfVHTtcl7g/0.jpg');">
    <span class="icon icon--play"><span class="visually-hidden">Play video on YouTube</span></span>
</a>

页面上会有多个指向YouTube视频的链接（未知数量），所有这些链接都有相同的标记，所以我想jQuery需要使用$(this)。

我还假设需要使用正则表达式从YouTube网址的所有变体中提取ID。如上所述：jQuery Youtube URL Validation with regex。

我根本不知道如何定位网页上的每个视频链接，使用正则表达式从链接的href中提取YouTube ID，然后将ID添加到每个链接的背景图片网址。

非常感谢任何帮助或代码建议，谢谢！

Answer 1

你可以这样做：

  $(".video__link").each(function() {
      var url = $(this).attr("href")
      var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
      var match = url.match(regExp);
      if (match && match[2].length == 11) {
         var id = match[2];
         var path = 'http://img.youtube.com/vi/'+id+'/0.jpg';
         $(this).css('background-image', 'url(' + path + ')');
      } 
  });

Answer 2

$('.video__link').each(function() {
    var videoId = $(this).attr('href');
    videoId = str.replace('https://www.youtube.com/watch?v=', '');
    $(this).css("background-image","http://img.youtube.com/vi/"+videoId+"/0.jpg");
});

所以这就是说，对于每个具有.video__link类的元素，抓住href attrubute并将其保存到变量中。然后通过将不是视频ID的youtube href位替换为空来重新保存该变量，从而为您留下ID。然后，它将background-image的内联CSS属性设置为标准Youtube图像路径加上视频的ID。

从链接获取YouTube ID并将其缩略图图像添加为背景图片（使用jQuery）

2 个答案: