Pop Web Video — Pop the video playing on this web page into an exactly-sized window.

bookmarklet.js

/* Created with YouScript Bookmarklet Editor
 * http://netj.github.com/youscript/
 */

var minWidth = 300; var minHeight = 200;
function getVideoElement(w) {
  // find the HTML5 video, or other likely video containers
  if (!w || !w.document || !w.document.getElementsByTagName) return null;
  function findVideoElementFrom(vs) {
    for (var i=0; i<vs.length; i++) {
      var v = vs[i];
      // find an element that is large enough
      if (v && v.offsetWidth >= minWidth && v.offsetHeight >= minHeight)
        return v;
    }
    return null;
  }
  var v = null;
  v = v || findVideoElementFrom(w.document.getElementsByTagName("video"));
  v = v || findVideoElementFrom(w.document.getElementsByTagName("embed"));
  v = v || findVideoElementFrom(w.document.getElementsByTagName("object"));
  if (v) return v;
  // also search frames
  for (var i=0; i<w.frames.length; i++) {
    v = getVideoElement(w.frames[i]);
    if (v) return v;
  }
  return null;
}

var v = getVideoElement(window);
if (v) {
  console.log("popping up video...", v);
  // try to pause and get the current playing time
  var t, min, sec;
  try {
    v.pause();
    t=v.currentTime;
    min=Math.floor(t/60);
    sec=t-60*min;
    console.log("video paused at "+min+":"+sec+".");
  } catch(err) {}
  // open a popup window
  var w=open(v.ownerDocument.documentURI, null, "menubar=0,toolbar=0,location=0,status=0,width="+v.offsetWidth+",height="+v.offsetHeight);
  var tries=0;
  w.addEventListener("load", function resumeVideo(){
    var popv = getVideoElement(w);
    console.log("locating video from the popup window...", v);
    if (!popv || v.id && v.id != popv.id || v.className && v.className != popv.className) {
      if (tries++<10) return setTimeout(resumeVideo, 100);
      else return setTimeout(resumeVideo, 1000);
    }
    popv.scrollIntoView(true);
    // XXX .scrollIntoView() does not take care of scrollLeft :(
    function getAbsLeft(e){
      if (e == null || e === document.body) return 0;
      else return e.offsetLeft + getAbsLeft(e.offsetParent);
    }
    w.document.body.scrollLeft = getAbsLeft(popv);
    // XXX remove the disturbing YouTube feedback icon that occludes the fullscreen button when used with ClickToPlugin
    var x = w.document.getElementById("yt-hitchhiker-feedback");
    if (x) x.style.display = "none";
    if (t) {
      // resume the video if we know where we paused
      function once(e,evt,f){
        var _f=function(){
          f.apply(this,arguments);
          e.removeEventListener(evt,_f);
        };
        e.addEventListener(evt,_f);
      }
      var seekDone=false;
      function seekVideo(){
        if (seekDone) return;
        console.log("video resuming from "+min+":"+sec+"...");
        this.currentTime=t;
        seekDone=true;
      }
      once(popv, "load", seekVideo);
      once(popv, "play", seekVideo);
      once(popv, "canplay", seekVideo);
      once(popv, "playing", seekVideo);
      once(popv, "progress", seekVideo);
    }
  });
}