Get YouTube ID from link and add its thumbnail image as a background image (with jQuery)

Question

I'm looking to try and extract the ID from a YouTube URL in a link, and use the ID to add the video's thumbnail image as a background image to the link.

This is the starting point markup:

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

And the end result I'm after is:

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

There will be multiple links to YouTube videos on the page (an unknown quantity), all with the same markup, so I guess the jQuery will need to make use of $(this).

I'm also presuming that regex will need to be used to extract the ID from all variations of a YouTube URL. As mentioned here: jQuery Youtube URL Validation with regex.

I just have no idea how to target each video link on the page, extract the YouTube ID from the link's href using regex and then add the ID to the background image URL for each link.

Any help or code suggestions would be greatly appreciated thank you!

Dhara Parmar · Answer 1 · 2016-05-10T13:39:53.597

4

You can do like this:

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

edited May 10 '16 at 13:39

answered May 10 '16 at 13:01

Dhara Parmar

8,021
1
16
27

Works like an absolute dream, thank you! How would you suggest incorporating the regex stuff? There's a chance my CMS users could paste in the embed version of the code or the short URL version (http://youtu.be/). The solution I linked to in my original question was `^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$`, but I'm not sure how I combine that with the code you supplied. Thanks again. – benspencer May 10 '16 at 13:28
do you want reg exp for getting id from youtube url? – Dhara Parmar May 10 '16 at 13:31
@benspencer I have updated code above with reg exp. check that – Dhara Parmar May 10 '16 at 13:40
Thanks again. The short YouTube URL works ok, but the embed version doesn't I'm afraid. A background image isn't outputted at all. – benspencer May 10 '16 at 14:15

score 2 · Answer 2 · answered May 10 '16 at 13:07

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

So what this is doing is saying, for each element that has the .video__link class, grab the href attrubute and save that to a variable. Then resave that variable by replacing the youtube href bit that ISN'T the video ID with nothing, leaving you with the ID. Then it sets an inline CSS property of background-image to the standard Youtube image path plus the ID of your video.

Get YouTube ID from link and add its thumbnail image as a background image (with jQuery)

2 Answers2