|

Userscript for full-width Invidious videos

Invidious is an alternative front-end to YouTube that without ads or tracking. Their normal layout has large margins on both sides of the video. This simple userscript removes margins around the video player, making videos full-width, which is more usable on a multi-monitor setup.

Userscripts are javascript files that run on your browser and customize websites on-the-fly, adding new features or changing pre-existing ones. Using them requires installing a user script manager, such as Violentmonkey.

A small change in the width of a video provides a much larger viewing area.

Full-width Invidious Videos is a very simple userscript that simply adds these CSS declarations to the page:

  div#player-container {
    margin: 0 -10% 25%;
    padding: 0;
  }
  .video-js.player-dimensions.vjs-fluid {
    padding-top: 0% !important;
    height: auto;
  }
  video#player_html5_api {
    position: relative;
    height: auto;
    max-height: 90vh;
  }

The first declaration blows up margins to go full-screen. Paddings are corrected for page content positioning (though not perfectly). Auto height allows for dynamic resizing based on video aspect ratio, and max-height prevents vertical videos from going over the fold.

The userscript is licensed under MIT, so do with it what you will.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.