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