Youtube Thumbnail Download Php Script

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

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 codeithub - youtube.com/codeithub -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download YouTube Video Thumbnail | codeithub</title>
  <link rel="stylesheet" href="https://www.codeithub.com/download-youtube-video-thumbnail/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:[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;
  }
}

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.

See also  How to Detect Browser in JavaScript

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.

Leave a Reply