Easy Youtube Video Thumbnail Downloader With jQuery

A jQuery-powered Youtube thumbnail downloader app that allows you to get the high- and low-resolution thumbnails from a YouTube video.

See Also:

• jQuery Plugin To Get & Display Youtube Thumbnails
• jQuery Plugin To Create Animated Youtube Thumbnails - PreViewTube.js

How to use it:

1. Create an input field that accepts the Youtube video URL.

<input type="text" name="Link" />

2. Create a button to fetch Youtube video thumbnails.

<button class="btn">
  Download
</button>

3. Create two empty img elements for the high- and low-resolution thumbnails.

<img src="https://" alt="" class="highres">
<img src="https://" alt="" class="lowres">

4. Load the required jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. The main function to fetch Youtube video thumbnails and display them on the page.

$(document).ready(function(){
  $(".btn").click(function(){
    var temp = $("input").val().split("=").pop();
    var highres = "https://i.ytimg.com/vi/" + temp + "/maxresdefault.jpg";
    var lowres = "https://i.ytimg.com/vi/" + temp + "/hqdefault.jpg"; 
    // display HD Youtube Thumbnail
    $(".highres").attr('src' , highres);
    // display low-res Youtube Thumbnail
    $(".lowres").attr('src' , lowres);
  });
});

---

This awesome jQuery plugin is developed by firatkilinc7. For more Advanced Usages, please check the demo page or visit the official website.