Posted By

astralis on 05/27/14


Tagged

javascript YouTube


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Beppoi


Grab YouTube video ID and thumbnail


 / Published in: JavaScript
 

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

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.

  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>

Report this snippet  

You need to login to post a comment.