Print youtube videos as a flip book

instructions.markdown

Print Youtube Videos as a Flip Book

1. open Firefox (sadly doesn't work in Chrome yet).
2. opt in for Youtube's HTML5 video player here: https://www.youtube.com/html5
3. open a Youtube video with thumbnail previews (e.g. https://www.youtube.com/watch?v=sd4bqmP_460)
4. hover over the videos progress bar so that a thumbnail appears
5. run the script below in your JavaScript console
6. wait a second for it to finish - it first shows you all thumbnails in an unsliced grid, 1 second later you should see it sliced and with black borders
7. cross your fingers it's in a 5x5 grid - that's what the code expects, otherwise tight click on a thumbnail, "view background image", count rows and columns and modify the script's framesPerRow and framesPerColumn (lines 10 and 11) settings manually - I had varying grid sizes for the same video, not sure what influences this :(
8. print with "print background images" ticked

Output

This was very quickly hacked together. We're working on reducing the steps above :)

print_youtube_video.js

var storyBoardImagePath = document.getElementsByClassName('ytp-progress-tooltip-thumbnail')[0].style.backgroundImage.match(/http.*"/)[0];
storyBoardImagePath = storyBoardImagePath.substring(0, storyBoardImagePath.length-1);

el = document.getElementsByTagName('body')[0];
el.innerHTML = "<img id='storyboard' src='" + storyBoardImagePath + "'>";

window.setTimeout(function() {
  

  var framesPerRow = 5.0,
      framesPerColumn = 5.0,
      storyBoardWidth = document.getElementById('storyboard').offsetWidth,
      storyBoardHeight = document.getElementById('storyboard').offsetHeight,
      frameWidth = storyBoardWidth / framesPerRow,
      frameHeight = storyBoardHeight / framesPerColumn,
      columns = storyBoardWidth / frameWidth,
      rows = storyBoardHeight / frameHeight,
      totalFrames = columns * rows;
  el.removeChild(document.getElementById('storyboard')); // remove image
  
  //_(rows).times(function(r) {
  var temp = '';
  for (var r = 0; r < rows; r++) {
    //_(columns).times(function(c){
    if(r==0){ temp = temp + '<div style="width: ' + columns * frameWidth + 'px">'; }
    for (var c=0; c < columns; c++) {
      temp = temp + '<div class="frame" style="margin-right: 5px;margin-bottom: 20px; border-style: solid; border-color: black; border-width: 10px 30px; float: left; width: ' + (frameWidth) + 'px; height: ' + (frameHeight) + 'px; background-position: ' + -(c*frameWidth) + 'px ' + -(r*frameHeight) + 'px; background-image: url(' + storyBoardImagePath + ')"></div>';
    }
    if (r== rows-1) { temp = temp + '</div>' }
  }
  el.innerHTML = el.innerHTML + temp;
  
}, 1000);

we want a firefox extension! :)