Youtube storyboard script - bigger thumbnail?

Question

http://www.labnol.org/internet/print-youtube-video/28217/

javascript:(function(){a=ytplayer.config.args.storyboard_spec;if(!a){alert("Sorry we cannot process this YouTube video. Could you please try another one");exit();}b=a.split("|");base=b[0].split("$")[0] "2/M";c=b[3].split("#");sigh=c[c.length-1];var imgs="";t=ytplayer.config.args.length_seconds;n=Math.ceil(c[2]/(c[3]*c[4]));for(i=0;i<n;i  ){imgs ="<PICTURE='" base i ".jpg?sigh=" sigh "'><br/>";}var title=ytplayer.config.args.title;msg="<body style='background-color:#444;color:#eee;margin:20px auto;width:90%;text-align:center'><h2>TITLE</h2><div>IMAGES</div><br/><em><a href='http://labnol.org/?p=28217' style='text-decoration:none;color:#fff;font-style:bold'>Printed using the YouTube bookmarklet.</a></em></body>";msg=msg.replace("TITLE",title).replace("IMAGES",imgs).replace(/PICTURE/g,"img src");var labnol=window.open();labnol.document.open();labnol.document.write(msg);labnol.document.close();})();

1 - I don't know how to get bigger thumbnail with this script, maybe youtube limited image quality/resolution frame so this code can't get bigger version ?

2 - Some new video 90-120 minutes + need several days to display full video thumbnail, it's true ?

Thank

pjpscriv · Accepted Answer · 2025-03-10 07:25:40Z

Here is the beautified version of the bookmarklet:

(function() {
  a = ytplayer.config.args.storyboard_spec;
  if (!a) {
    alert("Sorry we cannot process this YouTube video. Could you please try another one");
    exit();
  }
  b = a.split("|");
  base = b[0].split("$")[0] + "2/M";
  c = b[3].split("#");
  sigh = c[c.length - 1];
  var imgs = "";
  t = ytplayer.config.args.length_seconds;
  n = Math.ceil(c[2] / (c[3] * c[4]));
  for (i = 0; i < n; i++) {
    imgs += "<PICTURE='" + base + i + ".jpg?sigh=" + sigh + "'><br/>";
  }
  var title = ytplayer.config.args.title;
  msg = "<body style='background-color:#444;color:#eee;margin:20px auto;width:90%;text-align:center'><h2>TITLE</h2><div>IMAGES</div><br/><em><a href='http://labnol.org/?p=28217' style='text-decoration:none;color:#fff;font-style:bold'>Printed using the YouTube bookmarklet.</a></em></body>";
  msg = msg.replace("TITLE", title).replace("IMAGES", imgs).replace(/PICTURE/g, "img src");
  var labnol = window.open();
  labnol.document.open();
  labnol.document.write(msg);
  labnol.document.close();
})();

This page (partly in Chinese) appears to have disentangled the calculation scheme which we can use to figure out the labnol math: http://rplus.github.io/blog/2014/04/26/youtube-storyboard/

$L determines the size of storyboards and how few frames there are per "sprite" sheet.

According to that, these are calculated by:

L=1

100 (10 * 10), a total of 135 (one more than 35)

L=2

25 (5 * 5), a total of 135 (five more than 10)

L=3

9 (3 * 3), a total of 135 (just 15)

For a hypothetical video:

b variable contains two tiny size sheets (10x10) and two larger sized sheets

console.log(b)
["https://i.ytimg.com/sb/xxx/storyboard3_L$L/$N.jpg",
 "48#27#100#10#10#0#default#XX-LJCqt8cvoKdNR-LktzyCucWU",
 "80#45#242#10#10#10000#M$M#XXtyvKla08ayOvovocCEGBGtgfM", 
 "160#90#242#5#5#10000#M$M#XXNLRJzk9xaC36siHPgNM_ZsIlQ", 
 "320#180#242#3#3#10000#M$M#XXYfUj9jA3iVRkZk4QpfYICc53A"]

When calculating c, the bookmarklet author throws away the other three sizes, leaving only the 160px (5x5) size.

c = b[3].split("#");
console.log(c[2], c[3], c[4], c[2]/(c[3]*c[4]));
242 5 5 9.68

Ceil of 9.68 = 10.

If we replace b[3] with b[4], and fix the '2/M' that gets appended to the URL to '3/M', we get higher resolution images.

Simple replacement with larger version (some videos don't have largest version and will fail):

javascript:(function()%7Ba%3Dytplayer.config.args.storyboard_spec%3Bif(!a)%7Balert("Sorry we cannot process this YouTube video. Could you please try another one")%3Bexit()%3B%7Db%3Da.split("%7C")%3Bbase%3Db%5B0%5D.split("%24")%5B0%5D%2B"3/M"%3Bc%3Db%5B4%5D.split("%23")%3Bsigh%3Dc%5Bc.length-1%5D%3Bvar imgs%3D""%3Bt%3Dytplayer.config.args.length_seconds%3Bn%3DMath.ceil(c%5B2%5D/(c%5B3%5D*c%5B4%5D))%3Bfor(i%3D0%3Bi<n%3Bi%2B%2B)%7Bimgs%2B%3D"<PICTURE%3D%27"%2Bbase%2Bi%2B".jpg%3Fsigh%3D"%2Bsigh%2B"%27><br/>"%3B%7Dvar title%3Dytplayer.config.args.title%3Bmsg%3D"<body style%3D%27background-color:%23444%3Bcolor:%23eee%3Bmargin:20px auto%3Bwidth:90%25%3Btext-align:center%27><h2>TITLE</h2><div>IMAGES</div><br/><em><a href%3D%27http://labnol.org/%3Fp%3D28217%27 style%3D%27text-decoration:none%3Bcolor:%23fff%3Bfont-style:bold%27>Printed using the YouTube bookmarklet.</a></em></body>"%3Bmsg%3Dmsg.replace("TITLE",title).replace("IMAGES",imgs).replace(/PICTURE/g,"img src")%3Bvar labnol%3Dwindow.open()%3Blabnol.document.open()%3Blabnol.document.write(msg)%3Blabnol.document.close()%3B%7D)()%3B

Use the largest available thumbnail to make the sheet:

javascript:void%20function(){a=ytplayer.config.args.storyboard_spec,a||(alert(%22Sorry%20we%20cannot%20process%20this%20YouTube%20video.%20Could%20you%20please%20try%20another%20one%22),exit()),b=a.split(%22|%22),sz=b.length-1,base=b[0].split(%22$%22)[0]+(sz-1)+%22/M%22,c=b[sz].split(%22%23%22),sigh=c[c.length-1];var%20e=%22%22;for(t=ytplayer.config.args.length_seconds,n=Math.ceil(c[2]/(c[3]*c[4])),i=0;i%3Cn;i++)e+=%22%3CPICTURE='%22+base+i+%22.jpg%3Fsigh=%22+sigh+%22'%3E%3Cbr/%3E%22;var%20o=ytplayer.config.args.title;msg=%22%3Cbody%20style='background-color:%23444;color:%23eee;margin:20px%20auto;width:90%25;text-align:center'%3E%3Ch2%3ETITLE%3C/h2%3E%3Cdiv%3EIMAGES%3C/div%3E%3Cbr/%3E%3Cem%3E%3Ca%20href='http://labnol.org/%3Fp=28217'%20style='text-decoration:none;color:%23fff;font-style:bold'%3EPrinted%20using%20the%20YouTube%20bookmarklet.%3C/a%3E%3C/em%3E%3C/body%3E%22,msg=msg.replace(%22TITLE%22,o).replace(%22IMAGES%22,e).replace(/PICTURE/g,%22img%20src%22);var%20r=window.open();r.document.open(),r.document.write(msg),r.document.close()}();

Update This isn't in the bookmarklet but live Hangouts video storyboards are stashed in ytplayer.config.args.live_storyboard_spec e.g.

"https://i.ytimg.com/sb/xx/storyboard_live_60_3x3_b1/M$M.jpg?sigh=xx3f9uQQKI3j8yTiD2qO7_GynM8#106#60#3#3"

result is same, but thank.....the code depends on youtube res.... i always download video then use THUMBNAIL ME 3.0 with 4000width, rows 10 col 8 to make thumbnail of the video
I guess this answer is outdated as there is no ytplayer is an empty object

pjpscriv · Accepted Answer · 2025-03-05 06:45:34Z

The previous answer didn't work for me. This is what I managed to get working, just running in the console.

// Get Storyboards
const resp = ytplayer.config.args.raw_player_response;
const storyboards = resp.storyboards;
const specRend = storyboards.playerStoryboardSpecRenderer;
const spec = specRend.spec;

// Get the parts of the Storyboard spec
const parts = spec.split("|")

// The first part is the URL template
const get_base_url = (n, m) => parts[0].replace('L$L/$N',`L${n}/M${m}`);

// The rest are signatures you need to sign your requests
const signs = parts.slice(1)
                   .map(p => p.split("rs$")[1])
                   .filter(p => !!p)
                   .map(p => "rs%24" + p);

// Specify that we're getting the _first_ storyboard of each size
const sb_num = 0;

// Put them together 🎉
for (let i = 1; i < signs.length; i++) {
    let url = `${get_base_url(i, sb_num)}&sigh=${signs[i]}`
    console.log(url)
}

For example, running this script for this video gives these three links, going from smallest to largest:

https://i.ytimg.com/sb/sirIw5ODpcE/storyboard3_L1/M0.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgiOwvGnBg==&sigh=rs%24AOn4CLDd_OsACc8R2fEBfANqePJjM1k2aA
https://i.ytimg.com/sb/sirIw5ODpcE/storyboard3_L2/M0.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgiOwvGnBg==&sigh=rs%24AOn4CLCn1Yof2TH3aRVOarCGd-OCJFtwYg
https://i.ytimg.com/sb/sirIw5ODpcE/storyboard3_L3/M0.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgiOwvGnBg==&sigh=rs%24AOn4CLBgsXwlCHqi9nAhx8-A_yK9EsvtKw

If you want to get the 2nd or 3rd (and so on...) storyboard for each size - simply change the sb_num assignment to

const sb_num = 1;

...or 2 or 3, etc, etc...

Side note: if the script doesn't work for you, try running in incognito mode - I found for some reason it didn't work with one of my Chrome profiles 🤷

Image Examples

...storyboard3_L1/M0.jpg...

...storyboard3_L2/M0.jpg...

...storyboard3_L3/M0.jpg...

Collectives™ on Stack Overflow

Youtube storyboard script - bigger thumbnail?

2 Answers 2

2 Comments

Image Examples

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Image Examples

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related