Friday, May 24, 2019

Youtube video pop-out with autoplay and in HD!

I like to have the youtubes in a little popped out window next to my main browser in order to keep it visible when doing other stuff.
This greesemonkey/scriptish script replaces all the video links on the youtube site with a javacript window.open call which, predictably opens a new window with the video in it.

To make the location=0 part of the window.open call work in Firefox you have to set
dom.disable_window_open_feature.location=false
in about:config. The menubar should be hidable by default but if not that also has to be set to false.

With these settings you'll get a chromeless window with only the video in it.

We exclude user pages so that you can still go to the normal video view that way and see the description and comments.

Update: Added return false after the window open call to prevent the parent window scrolling to the top.
Update: Added /?vq=hd720 and autoplay=1 after the /v/-link-replace-stuff to get the popout video playing in 720p from the start and also actually start.
Update: Made it so that only clicking the thumbnail of a movie pops it out. Clicking the text title open the standard video page in the same window. Also removed the exclude of video links on user pages as it is not needed anymore.
Update: Changed the xpath-query to better find the right a-tags.
Update: Changed stuff and fixed junk. It is better now.
Update: Ehhh ...
Update: Less stupid xpath.
Update: Updated to work with new Youtube layout of Sept 2017.
Update: Trimmed away useless junk-code.
// ==UserScript==
// @name        Youtube Pop-out
// @namespace   miff
// @version     1
// @include /^https?://www\.youtube\.com/.*$/
// @noframes
// ==/UserScript==

// Requires dom.disable_window_open_feature.location=false in firefox

function fixLinks() {
  var thisLink,
      fluff;
  var fluffVars = '?autoplay=1&rel=0&modestbranding=1&showinfo=0';
  
  var links = document.evaluate(
                "//a[@id='thumbnail' and contains(@href,'/watch?v=')]",
                document.body,
                null,
                XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
                null
              );
  
  for (var i=0; i < links.snapshotLength; i++) {
    thisLink = links.snapshotItem(i);
    
    fluff = thisLink.href
              .replace('/watch?v=', '/embed/')
              .replace(/&t=\d*s/, ''); // we need to remove the time-parameter or it won't work.

    thisLink.href = "";
    thisLink.setAttribute("onclick", "window.open('" + fluff + fluffVars + "','fluff_yt'," +
                          "'location=0,menubar=0,toolbar=0,width=640,height=360'); return false;");
    thisLink.classList.remove("yt-simple-endpoint");
  }
}

function HandleDOM_ChangeWithDelay(zEvent) {
  if (typeof zGbl_DOM_ChangeTimer == "number") {
    clearTimeout (zGbl_DOM_ChangeTimer);
    zGbl_DOM_ChangeTimer = '';
  }
  
  zGbl_DOM_ChangeTimer = setTimeout(fixLinks, 500);
}

document.addEventListener("DOMSubtreeModified", HandleDOM_ChangeWithDelay, false);