Advanced Search

Grab YouTube video ID and thumbnail

/ Published in: JavaScript
Save to your folder(s)
This script will grab the YouTube video ID using regex so that many different types of YouTube urls. This will also output the id and thumbnail to view.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML:
  2. <div><strong>Insert YouTube url:</strong></div>
  3. <input type="text" id="ytlink" onkeyup="youtube_parser(this.value)">
  4.     <hr>
  5.     <div><strong>Output: YouTube video id:</strong></div>
  6.     <input type="text" id="ytimagelink" value="">
  7.         <div><strong>Output: Thumbnail</strong></div>
  8.         <div id="ytimage"></div>
  9.  
  10. JAVASCRIPT:
  11. <script>
  12. function youtube_parser(url) {
  13.     var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
  14.     var match = url.match(regExp);
  15.     if (match && match[1].length == 11) {
  16.         urllink = match[1];
  17.         imagelink = "<img src=\"http:\/\/img.youtube.com\/vi\/"+urllink+"\/hqdefault.jpg\">";
  18.     } else {
  19.         //urllink = "test"
  20.     }
  21.     document.getElementById("ytimagelink").value = urllink;
  22.     document.getElementById("ytimage").innerHTML = imagelink;       
  23. }
  24. </script>

URL: http://jsfiddle.net/PMrLR/7/

Report this snippet


Comments

You need to login to view comments.