Youtube Thumbnail Downloader Using HTML , CSS And Javascript
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
HTML (index.html)
<title>🖼 Get YouTube Thumbnail</title>
<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>
<div class="buttons">
<button class="btn btn-primary fw-light">👁🗨 Get 🖼</button>
<button class="btn btn-info fw-light">👀 Get Max 🖼</button>
<button class="btn btn-secondary fw-light">👁 Get Max webp</button>
<button class="btn btn-success fw-light">⏬ Download</button>
</div>
<img decoding="async" class="center-fit" id="img" 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"></div>
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);
}
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
Student Management System Using Python Introduction: The Student Management System is a comprehensive software solution designed to streamline the process of managing …
Billing Management System using Python introduction: The Billing software using python is a simple yet effective Python application designed to facilitate the …
More Python Projects
Get Huge Discounts
