☰

YouTube Pic Link (Updated December 2017)

Adds a picture link next to YouTube video Title

  1. // ==UserScript==
  2. // @name        YouTube Pic Link (Updated December 2017)
  3. // @description Adds a picture link next to YouTube video Title
  4. // @include     https://www.youtube.com/watch*
  5. // @grant    GM_addStyle
  6. // @version 0.1
  7. // @run-at document-idle
  8. // @namespace https://greasyfork.org/es/users/99730-edgartoe
  9. // ==/UserScript==
  10.  
  11. // The script: https://greasyfork.org/es/scripts/7365-youtube-pic-link is not working anymore
  12. // so I'm made this one.
  13.  
  14.  
  15. function GetVideoId(url){
  16.     var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
  17.     var match = url.match(regExp);
  18.     if (match && match[2].length == 11) {
  19.         return match[2];
  20.     } else {
  21.         //error
  22.     }
  23. }
  24. //Yeah... the timer it's a bad practice.
  25. //But it is the only workaround that actually works with the new Youtube layout.
  26. //None of these solutions work
  27. //https://stackoverflow.com/questions/43463001/userscript-cant-find-elements-in-the-dom#43463202
  28. setTimeout(function(){
  29. var url = window.location.toString();
  30.  
  31. //Thumbnails
  32. //  http://img.youtube.com/vi/ID/0.jpg or
  33. //  http://img.youtube.com/vi/ID/default.jpg – full size thumb
  34. //  http://img.youtube.com/vi/ID/mqdefault.jpg – medium default
  35. //  http://img.youtube.com/vi/ID/maxresdefault.jpg – high res  <---- I'm using this one, but not all videos have a high res thumbnail
  36. //  http://img.youtube.com/vi/ID/1.jpg – small thumb
  37. //  http://img.youtube.com/vi/ID/2.jpg – small thumb
  38. //  http://img.youtube.com/vi/ID/3.jpg – small thumb
  39.  
  40. var h1 = document.getElementsByClassName('title')[0];
  41. h1.innerHTML = '<a href="https://img.youtube.com/vi/' + GetVideoId(url) + '/maxresdefault.jpg" style="background:grey; border-radius:15px; margin-right:10px; padding:5px; color:white;">Picture</span></a>' + h1.innerHTML;
  42.  }, 5000);