Code of YouTube Thumbnail Downloader Tool In HTML with JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YouTube Thumbnail Downloader Tool</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.thumbnail-container {
margin-top: 20px;
}
.thumbnail {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
@media screen and (max-width: 600px) {
input[type=text] {
width: 100%;
}
button[type=submit] {
width: 100%;
float: none;
}
}
</style>
</head>
<body>
<div class="container">
<h1>YouTube Thumbnail Downloader Tool</h1>
<form onsubmit="return false;">
<label for="url">Enter YouTube Video URL:</label>
<input type="text" id="url" placeholder="https://www.youtube.com/watch?v=VIDEO_ID">
<button type="submit" onclick="getThumbnail()">Get Thumbnail</button>
</form>
<div class="thumbnail-container">
<img id="thumbnail" class="thumbnail" src="" alt="YouTube Thumbnail">
</div>
</div>
<script>
function getThumbnail() {
var url = document.getElementById("url").value;
var video_id = url.split("v=")[1];
var thumbnail_url = "https://img.youtube.com/vi/" + video_id + "/maxresdefault.jpg";
document.getElementById("thumbnail").src = thumbnail_url;
}
</script>
</body>
</html>
In this code, we create a simple HTML form that asks the user to enter a YouTube video URL. When the user clicks the "Get Thumbnail" button, we use JavaScript to extract the video ID from the URL and construct the URL for the video's maximum resolution thumbnail. We then update the src attribute of an img element to display the thumbnail. The CSS styles make the tool responsive and easy to use on different screen sizes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YouTube Thumbnail Downloader Tool</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<div class="container">
<!-- Form and thumbnail display go here -->
</div>
<script>
// JavaScript code goes here
</script>
</body>
</html>
We start by including the necessary meta tags in the head section to ensure our page is mobile-friendly and can be properly displayed on different devices. We also set the page title to "YouTube Thumbnail Downloader Tool".
In the style section, we define some basic CSS styles that will be used to style our form and thumbnail display. These styles make the form and thumbnail display responsive and easy to use on different screen sizes.
In the body section, we wrap our form and thumbnail display in a div element with the class container. This allows us to center our content on the page and add some padding around it.
Inside the container, we define a h1 element to display the heading for our page. We then create a form element with an input field and a submit button.
The input field is of type "text" and has an ID of "url". We also set a placeholder text to provide some guidance to the user about what kind of input is expected.
The submit button is of type "submit" and has a label of "Get Thumbnail". When clicked, this button will trigger the getThumbnail() function in our JavaScript code.
We then define a div element with the class thumbnail-container. This will be used to display the thumbnail image on our page.
Inside the thumbnail-container, we create an img element with an ID of "thumbnail" and a class of "thumbnail". This image element will display the thumbnail when it is fetched using JavaScript.
Finally, we add a script tag to include our JavaScript code. In this code, we define the getThumbnail() function that will be called when the user clicks the "Get Thumbnail" button.
Inside this function, we use JavaScript to extract the video ID from the URL entered by the user. We then construct the URL for the maximum resolution thumbnail for that video and set the src attribute of the img element to display the thumbnail.
That's it! With this code, we have created a simple and responsive YouTube thumbnail downloader tool that can be used on any device.
Comments
Post a Comment