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], as you can see in the image preview there is 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 is 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.
Click here to watch video tutorial of this project on YouTube
To create this project [Download YouTube Video Thumbnail]. First, you need to create two Files... one PHP File, and one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Download YouTube Video Thumbnail from this download link.
PHP CODE:
<?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;
}
?>
HTML Code
<!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>
CSS CODE:
/* 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;
}
}
For detailed explanation of these codes please visit the offical blog post - https://www.codingnepalweb.com/download-youtube-video-thumbnail/
Top comments (0)