☰

reddit-stream youtube

Inline embed for youtube links in reddit-stream.com

  1. // ==UserScript==
  2. // @name        reddit-stream youtube
  3. // @description Inline embed for youtube links in reddit-stream.com
  4. // @namespace   org.stevenhoward
  5. // @include     http://reddit-stream.com/*
  6. // @version     1
  7. // @grant       none
  8. // ==/UserScript==
  9.  
  10. function createYoutubeEmbed (link) {
  11.     let match = /.*[/]watch\?v=(.*)/.exec(link.href);
  12.     let frame = document.createElement('iframe');
  13.  
  14.     if (match && match.length && match.length == 2) {
  15.         frame.width = 640;
  16.         frame.height = 390;
  17.         frame.frameBorder = 0;
  18.         frame.style.display = 'block';
  19.         frame.src = `https://www.youtube.com/embed/${match[1]}?autoplay=1`;
  20.     }
  21.  
  22.     /* Return an empty iframe for malformed urls. Don't care about errors for now. */
  23.     return frame;
  24. }
  25.  
  26. function addVideoExpando (link) {
  27.     let toggle = document.createElement('a');
  28.     toggle.href = 'javascript: void(0)';
  29.     toggle.innerHTML = ' (+)';
  30.     toggle.style.opacity = 0.5;
  31.  
  32.     toggle.addEventListener('click', function () {
  33.         let existingFrame = link.parentNode.querySelector('iframe');
  34.         if (existingFrame) {
  35.             existingFrame.remove();
  36.             toggle.innerHTML = ' (+)';
  37.         }
  38.         else {
  39.             let frame = createYoutubeEmbed(link);
  40.             toggle.parentNode.insertBefore(frame, toggle.nextSibling);
  41.             toggle.innerHTML = ' (-)';
  42.         }
  43.     });
  44.  
  45.     link.parentNode.insertBefore(toggle, link.nextSibling);
  46. }
  47.  
  48. new MutationObserver(function (mutations) {
  49.     for (let mutation of mutations) {
  50.         for (let node of mutation.addedNodes) {
  51.             if (node.nodeType == Node.ELEMENT_NODE) {
  52.                 for (let video of node.querySelectorAll('a[href*="youtube.com"]')) {
  53.                     addVideoExpando(video);
  54.                 }
  55.             }
  56.         }
  57.     }
  58. }).observe(document.getElementById('c-main'), {
  59.     childList: true,
  60.     subtree: true
  61. });
  62.  
  63. for (let video of document.querySelectorAll('#c-main a[href*="youtube.com"]')) {
  64.     addVideoExpando(video);
  65. }