Created
October 14, 2024 21:20
-
-
Save avelican/2872c6a632c8f713482a2ab8309f91fe to your computer and use it in GitHub Desktop.
get youtube thumbnail
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>title</title> | |
| </head> | |
| <body> | |
| <input type="text" /> | |
| <br> | |
| <img/> | |
| <script> | |
| function url_to_vid(url) { | |
| let vid = null; | |
| try{ | |
| if(url.includes("youtu.be/")){ | |
| // get the part after youtu.be/ and before '?' (if applicable) | |
| let chunks = url.split('youtu.be/'); | |
| let chunks2 = chunks[1].split('?'); | |
| vid = chunks2[0]; // note: if there's no '?' we still get an array with 1 item, namely video id | |
| } else if (url.includes("youtube")) { | |
| let chunks = url.split('v='); | |
| let chunks2 = chunks[1].split('&'); | |
| vid = chunks2[0]; // ditto | |
| } else { | |
| alert('unknown url format'); | |
| } | |
| } catch (e){ | |
| alert('error: ' + e); | |
| } | |
| return vid; | |
| } | |
| function vid_to_thumb_url(vid) { | |
| return `https://img.youtube.com/vi/${vid}/sddefault.jpg`; | |
| } | |
| function update(e) { | |
| let url = e.target.value; | |
| let vid = url_to_vid(url); | |
| console.log(vid) | |
| let thumb_url = vid_to_thumb_url(vid); | |
| console.log(thumb_url ) | |
| document.querySelector('img').src = thumb_url; | |
| } | |
| document.querySelector('input').addEventListener('input', update); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment