Download YouTube Video Thumbnail [Source Codes]
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.
Download Disini
Post a Comment