Microsoft Surface 3 aspect ratio = 3:2…

… while most (YouTube) videos on the internet have a 16:9 aspect ratio.

Solutions to view videos fullscreen in a browser:

1 Browser extensions

• SuperWideZoom
• UltraWide Video
• Ultrawidify

Contra: mostly not available for Ms Edge browser

2 Chromium based Edge

Eerst geprobeerd met:

• UltraWide Video extension: niet ok
• Ultrawidify: OK

Maar uiteindelijk toch ook onderstaand Tampermonkey-script toegepast.

3 Tampermonkey script

The Tampermonkey Edge extension enables you to write scripts to "interfere" with all or chosen websites.

Analysis

• open a video full screen in Edge
• open the dev tools (F12) in a separate window (undocked)
• find </video>
• in the styles that appear, look for transform (not necessarily present) and/or add:
  • transform: scaleY(1.185) important;
    or
  • transform: scale(1.065, 1.185) important;
• the video must resize immediately → if that's the case, you can use the "discovered" style in the Tampermonkey script

Script

• Tampermonkey script based on description from the following site: https://somethingididnotknow.wordpress.com/2013/07/01/change-page-styles-with-greasemonkeytampermonkey/
• use @match to limit the scripts to the site(s) mentioned after @match (@match and @include are more or less the same: @include supports regular expressions, @match not)
• !important markers are the dirty part: that tag ensures that your styles are being applied, no matter what

// ==UserScript==
// @name StretchVideo2FullScreenSurface3+
// @namespace http://tampermonkey.net/
// @version 0.6
// @description Stretch (YouTube & VRTNU) videos to fill Surface 3+ displays (3:2 aspect ratio, distorted)
// @author Stijn Bousard | boossy
// @match https://www.youtube.com/*
// @match https://www.vrt.be/vrtnu/*
// @grant none
// ==/UserScript==
function addGlobalStyle(css) {
 var head, style;
 head = document.getElementsByTagName('head')[0];
 if (!head) { return; }
 style = document.createElement('style');
 style.type = 'text/css';
 style.innerHTML = css;
 head.appendChild(style);
}
// YouTube (stretch 3:2):
// addGlobalStyle('.html5-video-player .video-click-tracking, .html5-video-player .video-stream { display: block; width: 100%; height: 100%; position: absolute; transform: scaleY(1.185) !important; } ');
// YouTube (full height & width with overflow, but centered):
addGlobalStyle('.html5-video-player .video-click-tracking, .html5-video-player .video-stream { display: block; width: 100%; height: 100%; position: absolute; transform: scale(1.065, 1.185) !important; } ');
// VRT NU (stretch 3:2) -- upto 20/05/2019:
// addGlobalStyle('.vuplay-container video { display: block; width: 100%; height: 100%; top: 50%; left: 50%; -webkit-transform: translate3d(0px, 0px, 0px); transform: scaleY(1.185) !important; } ');
// VRT NU (full height & width with overflow, but centered) -- upto 20/05/2019:
// addGlobalStyle('.vuplay-container video { display: block; width: 100%; height: 100%; top: 50%; left: 50%; -webkit-transform: translate3d(0px, 0px, 0px); transform: scale(1.065, 1.185) !important; } ');
// VRT NU (stretch 3:2) -- from 21/05/2019 onwards:
// addGlobalStyle('.video-js .vjs-tech { position: absolute; z-index: 0; transform: scaleY(1.185) !important; } ');
// VRT NU (full height & width with overflow, but centered) -- from 21/05/2019 onwards:
// addGlobalStyle('.video-js .vjs-tech { position: absolute; z-index: 0; transform: scale(1.065, 1.185) !important; } ');
// VRT NU (full height & width with overflow, but centered) -- from 26/07/2019 onwards:
addGlobalStyle('.video-js .vjs-tech { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transform: scale(1.065, 1.185) !important; } ');
addGlobalStyle('.chapters { margin-top: 22px; } ');
addGlobalStyle('.chapters-wrapper .chapters-list { margin-top: revert; } ');

Online location

https://greasyfork.org/nl/scripts/372536-stretchvideo2fullscreensurface3