Download YouTube Video Thumbnail in PHP & JavaScript

Hey friends, today in this blog you’ll learn how to Save or Download YouTube Video Thumbnail or other Image Files using PHP cURL & JavaScript. In the earlier blog, I have shared a blog on how to create a URL Shortner Website using PHP and now it’s time to create a project to download YouTube video thumbnail using JavaScript & PHP.

In this project [Download YouTube Video Thumbnail], you can see in the image preview a white box or form with an input field, image preview area, and a download button. Download button is disabled until you paste a valid YouTube video URL or other image file URL.

When you paste YouTube video URL immediately, there appears a preview of the thumbnail of that video and you can download it. This thumbnail downloader accepts all types of YouTube video URLs means long or short URLs of the videos. And it also accepts any other image file like .jpg, .jepg, .png, .gif, and .webp.

Video Tutorial of YouTube Thumbnail Downloader

 
In the video, you have seen how this downloader looks like and how you can download a thumbnail or other image files by pasting their link or URL. In the video, you have also seen how I created this thumbnail downloader using HTML CSS JavaScript & PHP.

As you already know, To create this project I used only 6-8 lines of PHP cURL codes and they are used to download an image only and all other things are done using JavaScript like preview thumbnail. So if you don’t know PHP then you can also watch this video to learn JavaScript. I tried to explain each JavaScript & PHP line with comments and I hope you’ve understood the codes.

Let’s understand how I got a thumbnail from the URL and downloaded it but before this, you’ve to know how YouTube video URL looks like.

• Long URL of the video – https://www.youtube.com/watch?v=FucPPCPDd2Y
• Short URL of the same video – https://youtu.be/FucPPCPDd2Y

As you can see in both URLs there is the same video ID FucPPCPDd2Y of 11 lengths long and this ID is unique to each video and we need only this ID to get the thumbnail of this video. Using JavaScript, first, I got the user entered video URL and split it from the v= if the URL is long or split it from /be if the URL is short to get only video ID.

After I got the video ID, https://img.youtube.com/vi/VID_ID/maxresdefault.jpg is the thumbnail URL of the YouTube video. If you open this URL by replacing VID_ID with some random video ID then you’ll get a thumbnail of that video. I just replaced this VID_ID with the user entered video ID and inserted this full URL inside <img src=”thumbnail_url”> to show an image preview and at the same time I passed this URL in value of a hidden input to download this thumbnail using PHP. That’s it after I got a thumbnail, I just download it using PHP cURL.

Remember, YouTube has four types of thumbnail URLs and in this project, I only used one of them.

• Low-Quality – https://img.youtube.com/vi/VID_ID/sddefault.jpg
• Medium-Quality – https://img.youtube.com/vi/VID_ID/mqdefault.jpg
• Hight-Quality – https://img.youtube.com/vi/VID_ID/hqdefault.jpg
• Max High-Quality – https://img.youtube.com/vi/VID_ID/maxresdefault.jpg

You might like this:

• AdBlocker Detector in JavaScript
• Drag & Drop or Browse File Upload
• Check Network Status in JavaScript
• Chat Application in PHP with MySQL

Download YouTube Video Thumbnail [Source Codes]

To create this program [Download YouTube Video Thumbnail]. First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following codes into your file. First, create a PHP file with the name of index.php and paste the given codes into your PHP file. Remember, you’ve to create a file with .php extension.

<?php
  if(isset($_POST['button'])){
    $imgUrl = $_POST['imgurl'];
    $ch = curl_init($imgUrl);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $downloadImg = curl_exec($ch);
    curl_close($ch);
    header('Content-type: image/jpg');
    header('Content-Disposition: attachment;filename="thumbnail.jpg"');
    echo $downloadImg;
  }
?>
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download YouTube Video Thumbnail | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <header>Download Thumbnail</header>
    <div class="url-input">
      <span class="title">Paste video url:</span>
      <div class="field">
        <input type="text" placeholder="https://www.youtube.com/watch?v=lqwdD2ivIbM" required>
        <input class="hidden-input" type="hidden" name="imgurl">
        <span class="bottom-line"></span>
      </div>
    </div>
    <div class="preview-area">
      <img class="thumbnail" src="" alt="">
      <i class="icon fas fa-cloud-download-alt"></i>
      <span>Paste video url to see preview</span>
    </div>
    <button class="download-btn" type="submit" name="button">Download Thumbnail</button>
  </form>

  <script>
    const urlField = document.querySelector(".field input"),
    previewArea = document.querySelector(".preview-area"),
    imgTag = previewArea.querySelector(".thumbnail"),
    hiddenInput = document.querySelector(".hidden-input"),
    button = document.querySelector(".download-btn");

    urlField.onkeyup = ()=>{
      let imgUrl = urlField.value;
      previewArea.classList.add("active");
      button.style.pointerEvents = "auto";
      if(imgUrl.indexOf("https://www.youtube.com/watch?v=") != -1){
        let vidId = imgUrl.split('v=')[1].substring(0, 11);
        let ytImgUrl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        imgTag.src = ytImgUrl;
      }else if(imgUrl.indexOf("https://youtu.be/") != -1){
        let vidId = imgUrl.split('be/')[1].substring(0, 11);
        let ytImgUrl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        imgTag.src = ytImgUrl;
      }else if(imgUrl.match(/\.(jpe?g|png|gif|bmp|webp)$/i)){
        imgTag.src = imgUrl;
      }else{
        imgTag.src = "";
        button.style.pointerEvents = "none";
        previewArea.classList.remove("active");
      }
      hiddenInput.value = imgTag.src;
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font - Poppins & Noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #7D2AE8;
}
::selection{
  color: #fff;
  background: #7D2AE8;
}
form{
  width: 450px;
  background: #fff;
  padding: 30px ;
  border-radius: 5px;
  box-shadow: 10px 10px 13px rgba(0,0,0,0.1);
}
form header{
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-top: 10px;
  color: #7D2AE8;
}
form .url-input{
  margin: 30px 0;
}
.url-input .title{
  font-size: 18px;
  color: #373737;
}
.url-input .field{
  margin-top: 5px;
  height: 50px;
  width: 100%;
  position: relative;
}
.url-input .field input{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 15px;
  background: #F1F1F7;
  border-bottom: 2px solid #ccc;
  font-family: 'Noto Sans', sans-serif;
}
.url-input .field input::placeholder{
  color: #b3b3b3;
}
.url-input .field .bottom-line{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #7D2AE8;
  transform: scale(0);
  transition: transform 0.3s ease;
}
.url-input .field input:focus ~ .bottom-line,
.url-input .field input:valid ~ .bottom-line{
  transform: scale(1);
}
form .preview-area{
  border-radius: 5px;
  height: 220px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #8e46ec;
}
.preview-area.active{
  border: none;
}
.preview-area .thumbnail{
  width: 100%;
  display: none;
  border-radius: 5px;
}
.preview-area.active .thumbnail{
  display: block;
}
.preview-area.active .icon,
.preview-area.active span{
  display: none;
}
.preview-area .icon{
  color: #8e46ec;
  font-size: 80px;
}
.preview-area span{
  color: #8e46ec;
  margin-top: 25px;
}
form .download-btn{
  color: #fff;
  height: 53px;
  width: 100%;
  outline: none;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin: 30px 0 20px 0;
  border-radius: 5px;
  background: #7D2AE8;
  pointer-events: none;
  transition: background 0.3s ease;
}
.download-btn:hover{
  background: #6616d0;
}
@media screen and (max-width: 460px){
  body{
    padding: 0 20px;
  }
  form header{
    font-size: 24px;
  }
  .url-input .field,
  form .download-btn{
    height: 45px;
  }
  form .download-btn{
    font-size: 15px;
  }
  form .preview-area{
    height: 130px;
  }
  .preview-area .icon{
    font-size: 50px;
  }
  .preview-area span{
    margin-top: 10px;
    font-size: 12px;
  }
}

That’s all, now you’ve successfully created a project on Download YouTube Video Thumbnail using HTML CSS JavaScript & PHP. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

After extracting, move this folder inside htdocs of your XAMPP installation directory and start the apache server from xampp control panel and then open this url – localhost/thumbnail or localhost/thumbnail/index.php in your browser.