☰

YouTube Pic Link (Updated December 2017)

Adds a picture link next to YouTube video Title

// ==UserScript==
// @name        YouTube Pic Link (Updated December 2017)
// @description Adds a picture link next to YouTube video Title
// @include     https://www.youtube.com/watch*
// @grant    GM_addStyle
// @version 0.1
// @run-at document-idle
// @namespace https://greasyfork.org/es/users/99730-edgartoe
// ==/UserScript==

// The script: https://greasyfork.org/es/scripts/7365-youtube-pic-link is not working anymore
// so I'm made this one.


function GetVideoId(url){
    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        //error
    }
}
//Yeah... the timer it's a bad practice.
//But it is the only workaround that actually works with the new Youtube layout.
//None of these solutions work
//https://stackoverflow.com/questions/43463001/userscript-cant-find-elements-in-the-dom#43463202
setTimeout(function(){
var url = window.location.toString();

//Thumbnails
//  http://img.youtube.com/vi/ID/0.jpg or
//  http://img.youtube.com/vi/ID/default.jpg – full size thumb
//  http://img.youtube.com/vi/ID/mqdefault.jpg – medium default
//  http://img.youtube.com/vi/ID/maxresdefault.jpg – high res  <---- I'm using this one, but not all videos have a high res thumbnail
//  http://img.youtube.com/vi/ID/1.jpg – small thumb
//  http://img.youtube.com/vi/ID/2.jpg – small thumb
//  http://img.youtube.com/vi/ID/3.jpg – small thumb

var h1 = document.getElementsByClassName('title')[0];
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;
 }, 5000);