javascript - 从链接获取 YouTube ID 并将其缩略图添加为背景图像(使用 jQuery)

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 添加到每个链接的背景图像 URL。

任何帮助或代码建议将不胜感激，谢谢!

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 + ')');
      } 
  });