Fluratech

Download Youtube video thumbnail using JavaScript - JS projects for beginners

Author- Premraj MS

JavaScript projects  | Youtube thumbnail image downloader tool | javascript projects for beginners | beginners javascript projects | HTML CSS javascript projects with source code | javascript projects ideas | Advanced JavaScript projects with source code|

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 displayed 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 make more skills in web development. So keep in touch with fluratech.com.

You might like:

  1. How to make an HTML-to-PDF converter? HTML to PDF - JS library
  2. Detect browser using JavaScript - with source code
  3. Download button with counter using HTML CSS and JavaScript 
  4. How to create an Internet status viewer using JavaScript?
  5. Words counter with stylish dark UI using HTML CSS and JS

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 need for this project

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>";
    
}
Adverticement

Discussions

Post a Comment