How to get Youtube Thumbnail using Javascript?

In this post, We will see how to get and display youtube thumbnail images using HTML,CSS,JS.

I've provided you with some screenshots that walk you through the process of using this YouTube thumbnail downloader. The first step is very simple: just copy any YouTube link and choose whichever thumbnail you like.

Now copy the URL and paste it into the input box. Press the Get Thumbnail button as soon as you do. It will create thumbnail for you.

If you choose to download, simply click the download button at the bottom of the thumbnail, and it will start downloading to your computer automatically.

Youtube Thumbnail Downloader:

Ouput:

Here is the complete code with HTML, CSS, and JavaScript to get and display a YouTube thumbnail:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube Thumbnail Downloader</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f4;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    #thumbnail {
      max-width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0 auto;
    }

    #youtube-url {
      width: 300px;
      display: block;
      margin: 0 auto;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 15px;
      border-radius: 5px;
    }

    #getYoutubeThumbnail {
      cursor: pointer;
      display: block;
      margin: 0 auto;
      background-color: orange;
      color: white;
      border: none;
      padding: 1rem;
      width: 250px;
      border-radius: 5px;
      margin-top: 1rem;
    }

    .thumbnailPrev {
      display: none;
    }
  </style>
</head>

<body>

  <h1>YouTube Thumbnail Downloader</h1>

  <form id="form">
    <label for="youtube-url">Enter YouTube Video URL:</label>
    <br><br>
    <input type="text" id="youtube-url" required>
    <button type="submit" id="getYoutubeThumbnail">Get Thumbnail</button>
  </form>

  <div class="thumbnailPrev">
    <h2>Thumbnail Preview</h2>
    <img id="thumbnail" alt="YouTube Thumbnail">
    <a id="download-link" href="#">Download Thumbnail</a>
  </div>

  <script>
    let getYoutubeThumbnail = document.querySelector("#getYoutubeThumbnail");
        let downloadLink = document.querySelector("#download-link");
        let form = document.getElementById("form");
        var canvas = document.createElement('canvas');

        form.addEventListener("submit", (e) => {
            e.preventDefault();
            document.querySelector(".thumbnailPrev").style.display = "block";
            var input = document.getElementById('youtube-url');
            var videoId = getVideoId(input.value);
            if (videoId) {
                var thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
                var thumbnail = document.getElementById('thumbnail');
                thumbnail.src = thumbnailUrl;
                var thumbnailImg = document.createElement('img');
                thumbnailImg.crossOrigin = 'anonymous'; // Add this line
                thumbnailImg.src = thumbnailUrl;
                thumbnailImg.onload = function () {
                    canvas.width = thumbnailImg.width;
                    canvas.height = thumbnailImg.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(thumbnailImg, 0, 0);
                };
            }
        });

        downloadLink.addEventListener("click", (() => {
            var dataURL = canvas.toDataURL('image/jpeg');
            var downloadLink = document.createElement('a');
            downloadLink.href = dataURL;
            downloadLink.download = 'thumbnail.jpg';
            downloadLink.click();
        }));

        function getVideoId(url) {
            var regex = /[?&]v=([^&#]+)/;
            var match = url.match(regex);
            return match && match[1];
        }
  </script>

</body>

</html>

Techstackkit

How to get Youtube Thumbnail using Javascript?

Youtube Thumbnail Downloader:

Ouput:

Happy Coding! ❤️