Log inRegister

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;
  • 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.3
// @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 (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; } ');

Online location

https://greasyfork.org/nl/scripts/372536-stretchvideo2fullscreensurface3
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
This page was cached on 20 Apr 2021 - 13:11.