Raw Source Toggle Dropdown

• Minified Source

jnaskali / Invidious full-width video

// ==UserScript==
// @name      Invidious full-width video
// @author    jnaskali
// @copyright 2020, Juhani Naskali (www.naskali.fi)
// @license   MIT
// @version   1.8
// @namespace https://www.naskali.fi
// @homepageURL https://www.naskali.fi/2020/userscript/full-width-invidious-video/
// @downloadURL https://openuserjs.org/install/jnaskali/Invidious_full-width_video.user.js
// 
// @include     https://invidi*.*/watch?v=*
// @include     https://yewtu.be/watch?v=*
// @include     https://watch.nettohikari.com/watch?v=*
// @grant     none
// @run-at    document-end
// 
// @description Resizes Invidious video players to full-width.
// ==/UserScript==

var style = document.createElement('style');
style.innerHTML = `
  div#player-container {
    margin: 0 -10% 71vh;
    padding: 0 !important;
  }

  .video-js.player-dimensions.vjs-fluid {
    padding-top: 0% !important;
    height: auto;
  }

  video#player_html5_api {
    position: relative;
    height: auto;
    max-height: 100vh;
  }
  .hover-catcher {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
  }
  .hover-catcher .navbar {
    display: none;
    background: #000;
    top: 0;
    left: 165px;
    right: 165px;
    margin: 0;
    padding: 1em 6vw;
  }
  .hover-catcher:hover .navbar {
    display: flex;
  }
  
`;
document.head.appendChild(style);


// Adapt to actual height on video resize
onResizeElem( document.querySelector('.video-js'), updateVideoMargin );

  
// Add transparent div for catching mouse hover on top of page
var navbar = document.querySelector('.navbar');
var parent = navbar.parentNode;

var catcher = document.createElement('div');
catcher.classList.add('hover-catcher');

parent.replaceChild(catcher, navbar);
catcher.appendChild(navbar);
  
function updateVideoMargin() {
  document.getElementById("player-container").style.marginBottom = document.querySelector('.video-js').offsetHeight + 15 + "px";
}
function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}