Table of Contents
Youtube Thumbnail Downloder Using HTML
Hello friends, all of you are welcome to this new and wonderful project, my name is Gautam, so today I have created a wonderful project for you in which you can download thumbnails of YouTube and also the good thing for you is this. This YouTube thumbnail downloader is absolutely responsive, which you can use on any device. We have created it with the help of HTML, CSS and JavaScript. It works very well. In this, you can download any type of YouTube thumbnail. You can do it the way you want to do it
Friends, we have added some images in the front page of this YouTube thumbnail downloader website so that our YouTube thumbnail downloader website looks good, along with this we have also added some bodies so that the user can download any type of thumbnail and Also, if he wants to download the normal thumbnail, he can also do so.
Friends, now to use the code of this YouTube thumbnail downloader website, you will have to keep some things in mind which will be told to you step by step below, so let’s know.
Step To Create Youtube Thumbnail Downloder
Friends, to create and use this YouTube thumbnail downloader, you will need this code. If you have good knowledge of HTML, CSS and JavaScript then it is good for you. If you do not have any knowledge of these then you can There may be a problem, but if you do not have the knowledge, then you have to understand the steps given below properly, so let us know.
Look, first of all you have to prepare the structure of the website of YouTube thumbnail downloader, which you can easily create with the help of HTML, but before creating it, you have to create a folder in your computer, which you can name as YouTube or whatever. You can keep it, then after creating the folder, you have to open this folder in your code editor. After doing this, you will have to create three files in this folder. If you do not create any of these three files then There may be a problem with your YouTube thumbnail downloader, then you have to create the file inside the folder as per the name of the file given below.
- index.html
- style.css
- script.js
Friends, when you have created these three files, now you can use the code. First of all, you have to prepare the structure of this website, for which you will need the HTML code. You can index the HTML code on it. You have to upload it in the HTML file. Once you upload the code, the structure of your website will be ready.
Friends, now we will need CSS to make this website look good so that if any user comes to download the YouTube thumbnail then our website will look good to him. If you people do not make your website good and spoil its design. So people do not like to see your website much, that is why we are using CSS to make the website look good. You have to upload the below CSS code in your style.css file, but by uploading, you The code of this file will not work, now you will have to link this css code with the HTML file, so to link it, you have to put the following tag below the head, so that your css file will be linked to the HTML file. will be linked.
<link rel=”stylesheet” href=”style.css”>
Friends, if you have used the HTML and CSS code properly, then now you will need the most important code which is the JavaScript code. If you make any mistake in this code then your YouTube video thumbnail will not be downloaded. To use this JavaScript code properly, you have to upload the following JavaScript code in the JavaScript file created in your folder, then you have to add the following tag in the last part of the HTML file. You have to put this tag above the body tag so that your JavaScript file will be linked to the HTML. By doing this, now your YouTube thumbnail downloader website will be ready.
<script src=”script.js”></script>
(Index.html) Youtube Thambnail Downloader
Get YouTube Thumbnail
🖼 Get YouTube Thumbnail
(Style.css) Youtube Thambnail Downloader
@media only screen and (max-width: 300px) {
body {
color: yellow;
}
}
body,
html {
height: 100%;
display: grid;
}
body {
background-image: linear-gradient(45deg, #166774, #255407);
}
.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);
}
(Script.js) Youtube Thambnail Downloader
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);
}
Live Preview:-
See the Pen Untitled by Developergtm (@developergtm) on CodePen.