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 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;
  • 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.1
// @description Stretch YouTube & VRTNU videos to fill Surface 3+ displays (3:2 aspect ratio, distorted)
// @author Stijn Bousard
// @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:
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; } ');
// VRT NU (pure stretch):
// 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 (met afvloei in de breedte):
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; } ');

Topic revision: r7 - 23 April 2019, StijnBousard
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback