YouTube Thumbnail Downloader Using HTML , CSS And JavaScript With Source Code
Introduction :
Hello developers friends, all of you are welcome to this new blog post, today we have created a wonderful and very amazing project which is the most super project till date. Friends, I want to tell you that today we have created YouTube thumbnail downloader which is very useful. It’s great that if you add the link of a YouTube video in the logo input, you will get the thumbnail of that video downloaded.
Friends, this YouTube thumbnail downloader has been made like a website which you can host and also you can use it. I have used HTML and JavaScript to create this YouTube thumbnail downloader but let me tell you. I want to tell that in this project we have also used Bootstrap in which YouTube thumbnail has been made better in very less time. Friends, this YouTube thumbnail downloader is user friendly and works very well.
Friends, if you want to download the thumbnail of a YouTube video, then you have to copy the link of that YouTube video, then you have to open this tool, there we have created an input in which you can find the link. Then you will get four types of buttons below in which you can download different types of YouTube thumbnails. You have to click on the button of the type of thumbnail you want to download, then your thumbnail will be downloaded. will get
Friends, now if you want to use the code of this YouTube thumbnail downloader and want to use the tool, then you have to follow the steps given below, so let us know about those steps.
Steps to Create Youtube Thumbnail:-
Friends, you must be aware that we have not only taken the help of HTML and JavaScript to create this YouTube thumbnail downloader but we have also used Bootstrap with the help of which we have made this YouTube thumbnail better in a very short time. Friends, you will not need to link the code of Bootstrap in this because we have linked that code to the HTML file through a direct link.
- Friends, to use the code of this YouTube thumbnail downloader, you will first have to create a folder which you can create in your computer and which you can name anything.
- If you have created the folder correctly then now you have to open this folder in the code editor you use.
- Now if you have opened the folder in your code editor, then now you have to create three different files in this folder.
index.html
style.css
script.js
You have to create these three files in your folder. If you make any mistake in this file then your YouTube thumbnail downloader will not work. - Now that you have created all three files, now you have to upload them in the file as per the code heading given below.
Friends, we have used some images in this folder. If you need those images then you can take them from Telegram or you will get the full source code download button at the end of the post, from there you can download the direct code. Is
Get Discount on Top Educational Courses
Source Code:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🖼 Get YouTube Thumbnail</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="main fw-light">
<header>
<h4 class="display-6 lh-1 text-white">🖼 Get YouTube Thumbnail</h4>
</header>
<hr>
<label for="url" class="form-label small text-white">Enter YouTube video URL (supports .be, shorts, embed, with timestamps
and other clutter)</label>
<input name="url" type="search" id="url" class="form-control fw-light"
onfocus="if(this.value == 'https://www.youtube.com/watch?v=k8mOAV0KJLE') { this.value = ''; }"
onblur="if(this.value == '') { this.value = 'https://www.youtube.com/watch?v=k8mOAV0KJLE'; }"
value="https://www.youtube.com/watch?v=k8mOAV0KJLE" />
<div class="buttons">
<button class="btn btn-primary fw-light" onclick="dynamicUrl(0)">👁🗨 Get 🖼</button>
<button class="btn btn-info fw-light" onclick="dynamicUrl(1)">👀 Get Max 🖼</button>
<button class="btn btn-secondary fw-light" onclick="dynamicUrl(2)">👁 Get Max webp</button>
<button class="btn btn-success fw-light" onclick="download()">⏬ Download</button>
</div>
<img decoding="async" class="center-fit" id="img" onclick="fullPage()" title="Click to zoom in/out"
src="https://img.youtube.com/vi/k8mOAV0KJLE/maxresdefault.jpg" />
<footer>
<a class="text-decoration-none" href="https://developergtm.in/" target="_blank" rel="noopener"> @Developergtm.in</a>
</footer>
</div>
<div id="fullpage" title="Click to zoom in/out" onclick="this.style.display='none';"></div>
<script src="script.js"></script>
</body>
</html>
CSS (Style.css)
@media only screen and (max-width: 300px) {
body {
color: yellow;
}
}
body, html {
height: 100%;
display: grid;
}
body {
background-image: linear-gradient(45deg, #1b3c33, #195156);
}
.main {
margin: auto;
text-align: center;
max-width: 90vw;
}
.center-fit {
max-height: 50vh;
max-width: 50vw;
}
.buttons button {
margin: 0.5em;
}
.buttons {
margin: 0.5em;
}
#fullpage {
display: none;
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat no-repeat;
background-position: center center;
background-color: black;
}
footer {
margin: 1em;
}
footer img {
vertical-align: bottom;
transition-duration: 2s;
transition-property: transform;
}
footer img:hover,
footer a:hover img {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Javascript (Script.js)
function fullPage() {
const fullPage = document.querySelector('#fullpage');
fullPage.style.backgroundImage = 'url(' + document.getElementById('img').src + ')';
fullPage.style.display = 'block';
}
function dynamicUrl(type) {
let url = document.getElementById('url').value;
let id = url.match(/^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|shorts\/|embed\/|v\/)?)([\w\-]+)(\S+)?$/)[6];
let imgUrl;
if (type === 1)
imgUrl = `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;
else if (type === 2)
imgUrl = `https://img.youtube.com/vi_webp/${id}/maxresdefault.webp`;
else
imgUrl = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
let img = document.getElementById('img');
img.src = imgUrl;
return imgUrl;
}
function download() {
let link = document.createElement('a');
link.style.display = 'none';
link.href = document.getElementById('img').src;
link.download = 'get-yt-thumb.jpg';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Drawing Chhatrapati Shivaji Maharaj Using Python Chhatrapati Shivaji Maharaj, the legendary Maratha warrior and founder of the Maratha Empire, is an inspiration …
Resume Builder Application using Java With Source Code Graphical User Interface [GUI] Introduction: The Resume Builder Application is a powerful and user-friendly …
Encryption Tool using java with complete source Code GUI Introduction: The Encryption Tool is a Java-based GUI application designed to help users …
Movie Ticket Booking System using Java With Source Code Graphical User Interface [GUI] Introduction: The Movie Ticket Booking System is a Java …
Get Huge Discounts
More Python Projects
