How to make YouTube Thumbnail Downloader Using PHP.

0
YouTube Thumbnail Downloader

Hey friends, today in this blog you’ll learn How to make YouTube Thumbnail Downloader Using PHP. In the earlier blog, I have shared a blog on Login Form Validation Using HTML CSS & JavaScript 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. The 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.

Preview of YouTube Thumbnail Downloader

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

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


As you can see in both URLs there are the same video ID rHMZleMG628 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 Thumbnail Downloader 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 Blog:

  1. How to create Login Signup Page Using Simple HTML & CSS.
  2. How to create an HTML CSS animated sidebar navigation menu.
  3. Create A Mobile Responsive Chat Box
  4. Login Signup Page Using Advanced CSS And HTML.

YouTube Thumbnail Downloader[Source Codes]

To create this program [YouTube Thumbnail Downloader]. First, you need to create three Files one PHP, HTML Fille 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 a .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;
  }
?>

Create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Coding By CodeWithNepal - codewithnepal.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download YouTube Video Thumbnail | CodeWithNepal</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=hoH7zG0oLLE&list=RDhoH7zG0oLLE" 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>

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

/* Import Google font - Poppins & Noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected];500;600;700&family=Poppins:[email protected];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;
  }
}

Output

YouTube Thumbnail Downloader

LEAVE A REPLY

Please enter your comment!
Please enter your name here