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
Source Code:
HTML (index.html)
🖼 Get YouTube Thumbnail
🖼 Get YouTube Thumbnail
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);
}
Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …
COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …
Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …
Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …