Yourhub

Download Youtube video thumbnail using JavaScript

Author- Premraj MS
Youtube thumbnail image downloader tool

Hello guys, I know you are interested in JavaScript projects  So today I am going to share with you the source code of a simple YouTube thumbnail downloader tool using javascript. Actually, the tool extracts the thumbnail from a YouTube video and displays it. You can download the thumbnail by clicking the Download button. This project is going to be one of the easiest projects in your life.  You can use this tool in your project without any restrictions.

On this site, we are sharing the source code of different PHP or JavaScript projects helpful to beginners and middle-level developers who want to gain more skills in web development. So keep in touch with fluratech.com.

On YouTube, you can see two types of URLs long tail and short tail. Store only support long tail URL. Also, short-tail URLs are considered void.

The video will help you to understand how it works:

Files and folders needed for this project

To use the thumbnail downloader tool, simply enter the URL of a YouTube video into the input field and click the "Get RESULT" button. The thumbnail URL will be displayed in the output element, and the thumbnail image will be displayed in the div element. You can then right-click on the thumbnail and save it to your computer.

You want to create 3 files named index.html style.css and script.js in a folder. 

index.html 

 The file index.html contains all the HTML files for the purpose.


<!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>Thumbnail downloader tool</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="thumbnailcontainer">
        <center>
            <h1>Thumbnail downloader tool</h1>
        </center><br><br>

        <input type="url" id="mainUrl" placeholder="http://www.youtube.com/watch?v=T3mDL_MsZqs"><br><br>
        <button type="button" onclick="display()"> Get RESULT</button>
        <br><span class="thumbnailOutput"></span>
        <div class="thumbnailOutput1"></div>
        <script src="script.js"></script>
    </div>
</body>

</html>

style.css 

style.css is the file where all the CSS files are added.

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #333;

        }

        .thumbnailcontainer {
            max-width: 400px;
            margin: auto;
            background-color: azure;
        }
        input{
            width: 100%;
            font-size: 17px;
            font-weight: 600;
            padding: 10px;
            outline: none;
            border: 2px solid blue;
            border-radius: 20px;
        }
        button{
            
            color: white;
            font-size: 18px;
            font-weight: 600;
            padding: 10px;
            background-color: blue;
            border-radius: 17px;
        }

script.js

In this file, all the javascript is added.


function display() {
    const youtube = (function () {
        let video, results;

        const getThumbnail = function (url, size) {
            if (url == null) {
                return '';
            }

            size = (size == null) ? 'big' : size;
            results = url.match('[\?&]v=([^&#]*)');
            video = (results == null) ? url : results[1];

            if (size == 'small') {
                return `http://img.youtube.com/vi/${video}/2.jpg`;
            }

            return `http://img.youtube.com/vi/${video}/0.jpg`;
        };

        return {
            thumbnail: getThumbnail
        };
    }());
    let url = document.getElementById("mainUrl").value;
    const thumbnail = youtube.thumbnail(url, "large")


    var download = thumbnail;
    document.querySelector(".thumbnailOutput").innerHTML = "<img width='100%'  alt='Thumbnail' src='" + thumbnail + "'/>";

        document.querySelector(".thumbnailOutput1").innerHTML = "<a href='" + download + "' download target='_blank'><B>Download</B></a>";
    
}

Here is a step-by-step breakdown of what the code does:

  1. The <!DOCTYPE html> declaration at the beginning of the code tells the browser that the document is an HTML document.
  2. The <html lang="en"> tag specifies that the language of the document is English.
  3. The <head> section contains information about the document, such as the title and meta tags.
  4. The <title>Thumbnail downloader tool</title> tag specifies the title of the document.
  5. The <link rel="stylesheet" href="style.css"> tag links to a CSS file that can be used to style the document.
  6. The <body> section contains the visible content of the document.
  7. The <div> tag creates a container for the thumbnail downloader tool.
  8. The <center> tag centers the content within the container.
  9. The <h1>Thumbnail downloader tool</h1> tag creates a heading with the text "Thumbnail downloader tool".
  10. The <input type="url" placeholder="http://www.youtube.com/watch?v=T3mDL_MsZqs"> tag creates an input field for the user to enter the URL of a YouTube video.
  11. The <button type="button" onclick="display()"> Get RESULT</button> tag creates a button that triggers the display() function when it is clicked.
  12. The <span></span> tag creates a span element to display the output of the display() function.
  13. The <div></div> tag creates a div element to display the thumbnail.
  14. The <script src="script.js"></script> tag links to a JavaScript file that contains the display() function.
  15. The </body> tag marks the end of the visible content of the document.
  16. The </html> tag marks the end of the HTML document.

Discussions

Post a Comment