Build a Youtube Video Thumbnail Extractor or Grabber Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content="Free YouTube Thumbnail Extractor"> <meta name="keywords" content="youtube, tools, content creation tool, thumbnail, youtube thumbnail"> <meta name="author" content="satyamsovan123"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>⏩ Thumbnail Extractor</title> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script> <link rel="stylesheet" href="styles.css"></head><body> <div class="container-fluid"> <h1>Enter <span class="youtube">YouTube</span> URL below </h1> <div class="row"> <div class="icon col-lg-12 col-md-12"> <i class="fab fa-youtube"></i> </div><div class="ip col-lg-12 col-md-12"> <input class="i form-control" type="text" placeholder="Enter the video link"> <button type="button" class="but btn btn-lg btn-outline-danger">Proceed <i class="yts fab fa-youtube"></i></button> </div><div class="image hide col-lg-12 col-md-12"> <a class="link" href="#"><h3 class="rfr">Click to download</h3></a> <img class="thumbnail" src="#" alt="extracted-yt-thumbnail"> </div></div></div><script src="index.js" charset="utf-8"></script></body></html>

 

 

styles.css

 

 

body{margin:0;padding:0;background:linear-gradient(0deg,red -30%,#fbf5f4 50%);height:100vh;text-align:center;margin-top:5%;font-family:'Indie Flower',cursive}input{margin-top:2%;text-align:center}.but{margin-top:4%;margin-bottom:4%}::-webkit-input-placeholder{opacity:.3}h1{font-size:400%}.i{margin:auto;border-radius:25px;font-size:130%;border-color:red;width:50%}.icon{margin-top:2%;font-size:800%;color:red}.yts{padding-top:4%}.image{margin-top:4%}.youtube:hover{color:red}.hide{visibility:hidden}.thumbnail{padding-top:2%;margin:auto;width:40%}image{padding-top:18%}a{color:#000;text-decoration:none}a:hover{color:#000;text-decoration:none}.loader{margin:auto;border:10px solid #fff;border-top:10px solid red;border-radius:50%;width:50px;height:50px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:1024px){body{margin-top:15%}.thumbnail{padding-top:10%;width:75%}}@media (max-width:770px){body{margin-top:10%}.thumbnail{padding-top:5%;width:70%}}@media (max-width:450px){.i{width:70%}body{margin-top:5%}h1{font-size:300%}.icon{font-size:500%}.thumbnail{padding-top:15%;width:90%}}@media (max-width:380px){.i{width:70%}body{margin-top:5%}h1{font-size:270%}.icon{font-size:500%}.thumbnail{padding-top:15%;width:90%}}

 

See also  Node.js Express Whatsapp Group Invite Link CRUD App Using MongoDB Full Project

 

index.js

 

 

var url="",callback=function(e){if(url=$(".i")[0].value,console.log("sdsd"),$("input").remove(),$(".but").remove(),$('<div class="loader"></div>').appendTo(".ip"),setTimeout(function(){$(".loader").fadeOut(),$(".image").removeClass("hide")},1e3),url.includes("=")){var t="https://i.ytimg.com/vi/"+url.split("=")[1]+"/maxresdefault.jpg";$("a").attr("href",t),$("img").attr("src",t),console.log(t),$(".thumbnail").before("<h3>Refresh to try again.</h3>")}else if(url.includes("youtu.be")){t="https://i.ytimg.com/vi/"+url.split("youtu.be/")[1]+"/maxresdefault.jpg";$("a").attr("href",t),$("img").attr("src",t),console.log(t),$(".thumbnail").before("<h3>Refresh to try again.</h3>")}else $(".thumbnail").before("<h3>Enter a valid URL.</h3>"),$(".thumbnail").before("<h3>Refresh to try again.</h3>"),$("img").remove(),$("a").remove()};$("input").keypress(callback),$(".but").click(callback);

 

 

 

thumbnail-extractor

 

YouTube Thumbnail Extractor

It’s a free YouTube video’s thumbnail extractor. I just made it for fun, just cause I was bored and I got the pattern of YouTube’s thumbnail. It’s the minified version. Use some beautification before reviewing the code. And it’s live as well. https://youtubethumbnail.netlify.app/ For some reason, it’s not working in Safari, please use anything other than Safari. I’m working on this issue.

 

Leave a Reply