Welcome folks today in this blog post we will be extracting youtube images from video url in javascript. All the full source code of the application is given below.
Get Started
In order to get started you need to create an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html> <head> <title>Currency Converter in Javascript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <h1 class="text-center">Youtube Thumbnail Grabber</h1> <form id="form"> <div class="form-group"> <input type="text" id="url" placeholder="Enter youtube video url" required class="form-control"> </div> <div class="form-group"> <button type="submit" class="btn btn-danger btn-block">Get Thumbnail Image</button> </div> </form> <div id="result"> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $("#form").submit(function(e){ e.preventDefault() var url = $("#url").val() // quality options: low, medium, high, max | default is max. var thumbnail = get_youtube_thumbnail(url, 'max'); console.log(thumbnail); $("#result").html(` <img src="${thumbnail}"/> `) }) function get_youtube_thumbnail(url, quality){ if(url){ var video_id, thumbnail, result; if(result = url.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/)) { video_id = result.pop(); } else if(result = url.match(/youtu.be\/(.{11})/)) { video_id = result.pop(); } if(video_id){ if(typeof quality == "undefined"){ quality = 'high'; } var quality_key = 'maxresdefault'; // Max quality if(quality == 'low'){ quality_key = 'sddefault'; }else if(quality == 'medium'){ quality_key = 'mqdefault'; } else if (quality == 'high') { quality_key = 'hqdefault'; } var thumbnail = "http://img.youtube.com/vi/"+video_id+"/"+quality_key+".jpg"; return thumbnail; } } return false; } </script> </html> |
Here we are using the below technologies inside this application
bootstrap for styling the application
ajax for submitting form dynamically
javascript for business logic
jquery javascript library for manipulating dom
Now if you open the index.html file inside the browser you will see the below screenshot
