youtube_snapshot.js

(function () {
var d = document;
var w = window;
var cont = w.____ytsnap || init();

var v = d.querySelector('video');
if(v.readyState!=4) return;
var c = d.createElement('canvas');
var vw = v.videoWidth, vh = v.videoHeight;
var thunmbnail_height = 60;
c.width = vw;c.height = vh;
var ctx = c.getContext('2d');

ctx.drawImage(v, 0, 0, vw, vh);
var url = c.toDataURL();

var link = d.createElement('a');

link.href = url;
link.target = '_blank';
link.setAttribute('style', 'display:inline-block;margin: 5px 0px 5px 5px;');
link.title = '[at ' + Math.round(v.currentTime) + '/' + Math.round(v.duration) + ' sec] open in new window.'

var pv = d.createElement('img');
pv.src = url;
pv.width = thunmbnail_height / (vh / vw);
pv.height = thunmbnail_height;

link.appendChild(pv);

cont.insertBefore( link, cont.firstChild );

function init() {
	var bar = d.createElement('div');
	bar.setAttribute('style', 'position:fixed;height: 70px;width: 100%;bottom: 0;background: #fff;z-index:99999999999;box-shadow:0 0 12px 1px rgba(0,0,0,.35);');

	var bc = d.createElement('div');
	bc.setAttribute('style', 'height: 100%;overflow: auto;');
	bar.appendChild(bc);

	var btn_close = d.createElement('button');
	btn_close.innerText= '×';
	btn_close.title= 'Close';
	btn_close.addEventListener('click', cleanup);
	btn_close.setAttribute('style', 'position:absolute;top: -30px;right: 0;line-height: 30px;width: 30px;height: 30px;cursor:pointer !important;background:#009DF9;color:#fff;overflow:auto');

	bar.appendChild(btn_close);
	d.body.appendChild(bar);
	w.____ytsnap = bc;
	w.____ytsnap_bar = bar;
	return bc;
}

function cleanup() {
	d.body.removeChild(w.____ytsnap_bar);
	w.____ytsnap = null;
	w.____ytsnap_bar = null;

}
})()