How to download YouTube Video Thumbnail using HTML CSS JavaScript & PHP ?

Last Updated : 17 May, 2024

In this project, you will learn how to download a YouTube video's Thumbnail. We will use simple HTML, CSS, JavaScript and PHP for this purpose. The basic idea is to use a URL of a YouTube video, that is provided by the user as input, fetch its thumbnail image and download it.

Screenshot-2024-02-22-103825

Approach:

Create an index.php file with an HTML form to input a YouTube video URL and a download button to save the thumbnail image.
Add a script.js file to handle the video preview by extracting the video ID from the URL and displaying it.
Use PHP to download the thumbnail image to the user's local storage using cURL.
Create a style.css file to add attractive styling to the application.
Link the style.css and script.js files to the index.php file using link and script tags, respectively.

let ytImg_URl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`

Example: Implementation to download YouTube video thumbnail.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: black;
}

/* Style for form */
form {
  width: 490px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

/* Style for heading */
form header {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #e82a2a;
}

/* Style for input section */
form .url-input {
  margin: 30px 0;
}
.url-input .heading {
  font-size: 15px;
  color: #e82a2a;
}
.url-input .input-field {
  margin-top: 10px;
  height: 40px;
  width: 100%;
}
.url-input .input-field input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 15px;
  background: #f1f1f7;
  border-radius: 10px;
}
.url-input .input-field input::placeholder {
  color: #b3b3b3;
}

/* Style for preview section */
form .preview-area {
  border-radius: 10px;
  height: 220px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dotted #e82a2a;
}
.preview-area .thumbnail {
  width: 100%;
  display: none;
  border-radius: 10px;
}
.preview-area .icon {
  color: #e82a2a;
  font-size: 80px;
}
.preview-area span {
  color: #e82a2a;
  margin-top: 25px;
  font-size: 15px;
  font-weight: 600;
}
.preview-area.active {
  border: none;
}
.preview-area.active .thumbnail {
  display: block;
}
.preview-area.active .icon,
.preview-area.active span {
  display: none;
}

/* Style for download button */
form .download-button {
  color: #fff;
  height: 50px;
  width: 100%;
  outline: none;
  border: none;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 10px;
  background: #e82a2a;
}
.download-button:hover {
  background: #db0000;
}

JavaScript

// Selecting relevant HTML elements using querySelector
const urlField = document.querySelector(".input-field input");
const previewArea = document.querySelector(".preview-area");
const imgTag = previewArea.querySelector(".thumbnail");
const hidden = document.querySelector(".hidden-input");

urlField.onkeyup = () => {
    // Fetching the entered YouTube video URL
    let img_URl = urlField.value;

    // Adding 'active' class to enable the thumbnail preview
    previewArea.classList.add("active");

    // Check different YouTube video URL formats and set thumbnail preview accordingly
    if (img_URl.indexOf("https://www.youtube.com/watch?v=") != -1) {
        // Extract video ID from the URL
        let vidId = img_URl.split("v=")[1].substring(0, 11);
        // Construct YouTube thumbnail URL using maxresdefault quality
        let ytImg_URl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        // Set the thumbnail preview image source
        imgTag.src = ytImg_URl;
    }
    // Short URL format
    else if (img_URl.indexOf("https://youtu.be/") != -1) {
        // Extract video ID
        let vidId = img_URl.split("be/")[1].substring(0, 11);
        // Construct YouTube thumbnail URL using maxresdefault quality
        let ytImg_URl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        // Set the thumbnail preview image source
        imgTag.src = ytImg_URl;
    }
    // If the entered URL is a direct image URL
    else if (img_URl.match(/\.(jpe?g|png|gif|bmp|webp)$/i)) {
        imgTag.src = img_URl;
    }
    // If none of the above conditions are met
    else {
        imgTag.src = "";
        previewArea.classList.remove("active");
    }

    // Set the value of the hidden input field to the image URL for form submission
    hidden.value = imgTag.src;
};