Removes letterboxing by cropping the left and right edges off of full-screen YouTube videos and zooming to fill the screen height.
// ==UserScript==
// @name Zoom and crop YouTube videos to fill screen height
// @version 0.6.4
// @description Removes letterboxing by cropping the left and right edges off of full-screen YouTube videos and zooming to fill the screen height.
// @author uxamend
// @namespace https://greasyfork.org/en/users/231373-uxamend
// @match https://www.youtube.com/*
// @match https://www.youtube-nocookie.com/embed/*
// @exclude-match https://www.youtube.com/ad_frame*
// @exclude-match https://www.youtube.com/ad_companion*
// @exclude-match https://www.youtube.com/embed/
// @exclude-match https://www.youtube.com/video_masthead*
// @grant none
// @run-at document-idle
// @license CC0-1.0
// @compatible firefox version >=64 (older versions untested)
// @compatible chrome version >=71 (older versions untested)
// ==/UserScript==
// In @exclude-matches above, we want to exclude exactly
// https://www.youtube.com/embed/, but not https://www.youtube.com/embed/*
// /embed/ without a subdirectory appears in the background of normal YouTube,
// whereas /embed/* is for embedded videos on other sites.
"use strict";
// ==================================
// User-defined global parameters
// ==================================
// For tall screens: Sets the narrowest aspect ratio that videos will ever be
// cropped to.
var min_cropped_aspect = 16/10; // Express as a fraction, e.g. 16/10, not 16:10.
// For very wide videos: The maximum proportion of video width to crop off
var max_crop_proportion = 1;
// Sets the aspect ratio of the player for using zoom outside of full-screen.
// This has no effect in full-screen mode.
// To use the screen aspect ratio as the player aspect ratio, set this to zero.
var player_aspect = 16/9; // Set to zero or a fraction, e.g. 16/9, not 16:9.
// Default zoom state outside full-screen (true = enabled, false = disabled)
var def_zoom_n = false;
// Default zoom state in full-screen (true = enabled, false = disabled)
var def_zoom_f = true;
// Sets which key will be used to enable and disable zoom
var zoom_shortcut_key = "z";
// ==================================
var debug_logging_on = false;
var debug_script_name = "Userscript: Zoom YouTube videos to fill screen height"
function debug_log(message) {
if(debug_logging_on){
console.log("[" + debug_script_name + "] " + message);
}
}
/**
* set_zoom
* Zooms a specified video to fill specified containing area dimensions.
* Parameters:
* video video to zoom
* cw containing area width
* ch containing area height
* Global parameters read:
* min_cropped_aspect minimum aspect ratio to crop videos down to
* max_crop_proportion maximum proportion of video width to crop away
*/
function set_zoom(video, cw, ch) {
var vs = video.style;
var video_aspect = video.videoWidth/video.videoHeight;
var containing_aspect = cw/ch;
// Don't zoom if the endscreen is showing
if(!video.ended) {
// Only zoom and crop videos that are wide enough to crop
if(video_aspect > containing_aspect && video_aspect > min_cropped_aspect) {
debug_log("Video is wider than containing area and min_cropped_aspect. Setting zoom.");
var vh = ch; // vh = video height
// Apply min_cropped_aspect constraint to video height
if (min_cropped_aspect > containing_aspect) vh = cw/min_cropped_aspect;
var vw = video_aspect * vh; // vw = video width (including cropped portion)
// Apply max_crop_proportion constraint to video width
if (cw/vw < 1-max_crop_proportion) vw = cw + vw * max_crop_proportion;
var vt = (ch-vh)/2; // vt = top edge position of video
var vl = (cw-vw)/2; // vl = left edge position of video
debug_log("Containing area dimensions: " + cw + "x" + ch + ".");
debug_log("Calculated new video element dimensions: " + vw + "x" + vh + ", origin at " + vl + ", " + vt + ".");
debug_log("(Underlying video stream resolution: " + video.videoWidth + "x" + video.videoHeight + ".)");
debug_log("containing_aspect: " + containing_aspect + ".");
debug_log("min_cropped_aspect: " + min_cropped_aspect + "." );
debug_log("video_aspect: " + video_aspect + ".");
debug_log("max_crop_proportion: " + max_crop_proportion + ".");
// This might appear to risk creating an endless loop via the mutation
// observer. However, it doesn't. I'm guessing that changing the dimensions
// doesn't constitute a mutation, but if it does it can result in at most one
// superfluous execution of set_zoom(). If the first execution causes a
// mutation by changing the video element's dimensions, then the second
// execution, if it is surplus to requirements, should set them to the same
// values, resulting in no mutation and no third execution (until genuinely
// needed).
vs.height = vh + "px";
vs.width = vw + "px";
vs.top = vt + "px";
vs.left = vl + "px";
} else {
debug_log("Video is not wide enough to require zoom ("
+ video.videoWidth
+ "x"
+ video.videoHeight
+ "). Not setting zoom.");
unzoom(video, cw, ch);
}
} else {
debug_log("Video has ended. Not setting zoom. (Otherwise we mess with the endscreen.)");
}
}
/**
* unzoom
* Undoes the visual effects of set_zoom.
* Note that unzoom does not gurantee to return the video dimensions exactly to
* their original values, but the visual appearance should be the same (or near
* enough as makes no odds).
* Parameters:
* video video to unzoom
* cw containing area width
* ch containing area height
*/
function unzoom(video, cw, ch) {
// It would be better to somehow trigger YouTube's standard video sizing, but
// in the absence of a way to trigger that, we'll just do this.
var vs = video.style;
var video_aspect = video.videoWidth/video.videoHeight;
var containing_aspect = cw/ch;
// Don't unzoom if the endscreen is showing
if(!video.ended) {
debug_log("Unzooming video.");
// Usually the player is sized to fit the video exactly in default view,
// but not for narrow videos, which are pillarboxed with white bars. Rarely,
// the player defaults to 16:9 for all videos, so that wide videos are
// letterboxed with white bars.
//
// In theater mode and full-screen mode, the player has a fixed aspect and
// the video is letter- or pillarboxed with black bars if it doesn't fit
// exactly.
//
// To avoid black bars in default view, we must size the video to fill the
// container in the video's longest dimension only. (Otherwise we could
// just size it to fill the container in both dimensions.)
var w, h, t, l;
if(video_aspect == containing_aspect) {
// video that fits the container exactly
w = cw; h = ch; t = 0; l = 0;
} else if(video_aspect > containing_aspect) {
// letterboxed video
w = cw; l = 0;
h = cw / video_aspect;
t = (ch - h) / 2;
} else {
// pillarboxed video
h = ch; t = 0;
w = ch * video_aspect;
l = (cw - w) / 2;
}
vs.width = w + "px";
vs.height = h + "px";
vs.top = t + "px";
vs.left = l + "px";
} else {
debug_log("Video has ended. Not unzooming. (Otherwise we mess with the endscreen.)");
}
}
/**
* in_theater_mode
* Returns true if we're in Theater mode.
*/
function in_theater_mode() {
return (document.getElementById("player-theater-container") &&
document.getElementById("player-theater-container").childElementCount > 0 &&
!document.fullscreenElement);
}
/**
* set_player_aspect
* Changes the aspect ratio of the video player element to the specified aspect
* ratio, as interpreted by YouTube's default CSS.
* Parameters:
* aspect aspect ratio to use
* theater_default if true, set theater mode to the default aspect ratio
* instead of the specified aspect ratio
*/
function set_player_aspect(aspect, theater_default=false) {
debug_log("Setting player aspect to " + aspect + ".");
// We need to set overflow to hidden on the movie-player otherwise the video
// overhangs in miniplayer mode. Get it by class name rather than id, for
// compatibility with embedded videos
document.getElementsByClassName("html5-video-player")[0].style.setProperty("overflow", "hidden");
// For embedded videos, we don't need to do anything.
// For default view
if(document.getElementsByTagName("ytd-watch-flexy")[0]) {
var ytdwfs = document.getElementsByTagName("ytd-watch-flexy")[0].style;
ytdwfs.setProperty("--ytd-watch-flexy-width-ratio", aspect);
ytdwfs.setProperty("--ytd-watch-flexy-height-ratio", 1);
}
// For theater mode
var ptc = document.getElementById("player-theater-container");
if(in_theater_mode() && !theater_default) {
debug_log("Setting theater mode height.");
// 56px for masthead; --ytd-masthead-height is not always set, so can't use
// that unfortunately
ptc.style.setProperty("max-height", "calc(100vh - 56px)");
ptc.style.setProperty("height", "calc((" + (1/aspect) + ") * 100vw)");
} else {
debug_log("Unsetting theater mode height.");
if(ptc) {
ptc.style.removeProperty("max-height");
ptc.style.removeProperty("height");
}
}
}
/**
* apply_player_aspect
* To facilitate zoom and crop when the movie_player is not full-screen, this sets
* the aspect ratio of the movie_player to follow the player_aspect setting.
* Calling with the zoom parameter set to false returns the player to the YouTube
* default of matching the video aspect ratio.
* Parameters:
* zoom if true, use player_aspect
* if false, use the actual video aspect (YouTube default)
* Global parameters read:
* player_aspect the aspect ratio to use, or zero (indicating to use the
* screen aspect)
*/
function apply_player_aspect(zoom=true) {
var video = document.getElementsByClassName("html5-main-video")[0];
var video_aspect = video.videoWidth/video.videoHeight;
if(zoom) {
if(player_aspect == 0) {
debug_log("Adjusting player aspect ratio to match screen.");
var screen_aspect = window.screen.width/window.screen.height;
if(video_aspect > screen_aspect) {
set_player_aspect(screen_aspect);
} else {
debug_log("No need to change player aspect; video is not wide enough.");
}
} else {
debug_log("Adjusting player aspect ratio to configured value.");
if(video_aspect > player_aspect) {
set_player_aspect(player_aspect);
} else {
debug_log("No need to change player aspect; video is not wide enough.");
}
}
} else {
debug_log("Restoring player aspect ratio to match video.");
set_player_aspect(video_aspect, true);
// N.B. If video_aspect is narrow, the expected behaviour of set_player_aspect
// is that YouTube's CSS may result in the video being pillarboxed, due to the
// maximum height constraint.
}
}
/**
* set_zoom_to_window
* Zooms a video to fill the window dimensions.
* Parameters:
* video the video to set zoom for
* zoom if false, will unzoom instead of setting zoom
* Global parameters read:
* min_cropped_aspect minimum aspect ratio to crop videos down to
* max_crop_proportion maximum proportion of video width to crop away
*/
function set_zoom_to_window(video, zoom=true) {
if(zoom) {
set_zoom(video,
window.innerWidth,
window.innerHeight);
} else {
unzoom(video,
window.innerWidth,
window.innerHeight);
}
}
/**
* set_zoom_to_movie_player
* Zooms a video to fill its containing movie_player element in the DOM. When not in
* full-screen mode, also changes the size of the movie_player to follow the
* player_aspect setting (else there'll be no zoom and crop).
* Parameters:
* video the video to set zoom for
* zoom if false, will unzoom instead of setting zoom
* Global parameters read:
* min_cropped_aspect minimum aspect ratio to crop videos down to
* max_crop_proportion maximum proportion of video width to crop away
* player_aspect aspect ratio setting for non-full-screen movie_player
*/
function set_zoom_to_movie_player(video, zoom=true) {
if(!document.fullscreenElement) {
// The movie_player is the grandparent node of the video element.
// Open question: Is it more likely for the ID of the relevant element to
// change (so that selecting it as the grandparent is the best strategy), or
// for its position in the DOM tree to change (so that selecting it by ID is
// the best strategy)?
if(zoom) {
apply_player_aspect(true);
set_zoom(video,
video.parentNode.parentNode.clientWidth,
video.parentNode.parentNode.clientHeight);
} else {
unzoom(video,
video.parentNode.parentNode.clientWidth,
video.parentNode.parentNode.clientHeight);
}
} else {
apply_player_aspect(false);
// In full-screen mode, the movie-player is not necessarily the same size as
// the screen, which can cause a slight offset. Use set_zoom_to_window instead
// for this case.
set_zoom_to_window(video, zoom);
}
zoom_button.update();
}
/**
* mo_callback
* Callback function for mutation observer, to re-apply zoom if the video element
* mutates. E.g. when an ad starts or stops playing, or in other circumstances
* when the video might change dimensions or become reset to its default,
* letterboxed state.
*/
function mo_callback(mutation_list, observer) {
mutation_list.forEach((mutation) => {
if(mutation.type == "attributes"){
// We have to check whether zoom "should" be on, because the
// fullscreenchange event may not be fast enough, in which case we will
// catch the mutations caused by exiting full-screen.
if(zoom_should_be_on()) {
debug_log("Video element mutated.");
set_zoom_to_movie_player(mutation.target);
} else {
debug_log("Video element mutated but zoom should be off.");
zoom_off();
}
}
});
}
var mo = new MutationObserver(mo_callback);
function observe_video_mutations(video) {
mo.observe(video, {"attributes" : true});
}
/**
* zoom_on
* Unconditionally apply zoom and keep it applied until zoom_off is called.
*/
function zoom_on() {
debug_log("Turning zoom on.");
var video = document.getElementsByClassName("html5-main-video")[0];
set_zoom_to_movie_player(video);
observe_video_mutations(video);
}
/**
* zoom_off
* Unconditionally stop applying zoom, until zoom_on is called.
*/
function zoom_off() {
debug_log("Turning zoom off.");
mo.disconnect();
var video = document.getElementsByClassName("html5-main-video")[0];
apply_player_aspect(false);
set_zoom_to_movie_player(video, false);
}
// Manual zoom state outside full-screen
var man_enab_n = def_zoom_n;
// Manual zoom state in full-screen
var man_enab_f = def_zoom_f;
/**
* zoom_should_be_on
* Returns true if we're in a state where zoom is supposed to currently be
* enabled, else false.
*/
function zoom_should_be_on() {
return ((man_enab_n && !document.fullscreenElement)
|| (man_enab_f && document.fullscreenElement));
}
/**
* zoom_on_or_off
* Puts zoom into the correct on/off state, as per zoom_should_be_on.
*/
function zoom_on_or_off() {
if(zoom_should_be_on()) {
setTimeout(zoom_on, 200);
} else {
zoom_off();
}
}
/**
* toggle_manual_enab
* Changes the manual override zoom state for the current display mode; either
* full-screen or non-full-screen.
*/
function toggle_manual_enab() {
debug_log("Toggling manual enable state.");
if(document.fullscreenElement){
man_enab_f = !man_enab_f;
if(man_enab_f) debug_log("Set full-screen zoom enabled.");
else debug_log("Set full-screen zoom disabled.");
} else {
man_enab_n = !man_enab_n;
if(man_enab_n) debug_log("Set non-full-screen zoom enabled.");
else debug_log("Set non-full-screen zoom disabled.");
}
zoom_on_or_off();
}
/**
* handle_keydown
* Event handler for any keydown events, to trigger appropriate actions.
*/
function handle_keydown(e) {
debug_log('"' + e.key + '" key was pressed.');
if(e.key == zoom_shortcut_key.toLowerCase()) toggle_manual_enab();
if(e.key == zoom_shortcut_key.toUpperCase()) toggle_manual_enab();
if(e.key == "i") {
// Workaround for bug: exiting miniplayer directly into normal view does not
// trigger reapplication of zoom. Pressing 'i' seems to be the only way to
// trigger this bug, so detecting the pressing of 'i' seems like a good way
// to fix it.
zoom_on_or_off();
}
}
/**
* watch_for_fullscreen
* Start watching for changes to the full-screen state, and make sure the correct
* zoom state is applied at each transition of full-screen state.
* N.B. There may be a slight delay in reaction to changes in full-screen state.
*/
function watch_for_fullscreen() {
debug_log("Adding fullscreenchange event listener.");
document.addEventListener(
'fullscreenchange',
function() {
debug_log("Full-screen state changed.");
zoom_on_or_off();
}
);
}
/**
* watch_for_keypresses
* Start watching for keydown events and handle them when they occur.
*/
function watch_for_keypresses() {
debug_log("Adding keydown event listener.");
document.addEventListener(
'keydown',
handle_keydown
);
}
/**
* create_zoom_button
* Adds a zoom button to the YouTube player controls, which toggles manual override of
* zoom state.
* Returns:
* an object representing the button
*/
function create_zoom_button() {
var right_controls;
var size_button;
var tooltip_showing = false;
var button;
var icon_path;
/**
* set_zoom_button_mode
* Sets the zoom button to an appropriate mode for the current zoom state.
*/
function set_zoom_button_mode() {
var l;
if(zoom_should_be_on()) {
icon_path.setAttribute("d",
"m 8,11 0,14 20,0 0,-14 -20,0 z m 2,4 16,0 0,6 -16,0 0,-6 z"
);
l = "Letterbox (" + zoom_shortcut_key + ")"
} else {
icon_path.setAttribute("d",
"m 4,11 0,14 3,0 0,-2 -1,0 0,-10 1,0 0,-2 -3,0 z\
m 4,0 0,14 20,0 0,-14 -20,0 z\
m 21,0 0,2 1,0 0,10 -1,0 0,2 3,0 0,-14 -3,0 z\
m -19,2 16,0 0,10 -16,0 0,-10 z"
);
l = "Zoom and crop (" + zoom_shortcut_key + ")"
}
button.setAttribute("aria-label", l);
button.setAttribute("title", l);
}
/**
* create_zoom_button_icon
* Adds the icon to the zoom button during initial creation of the button.
*/
function create_zoom_button_icon() {
// Create icon SVG element
var s = document.createElementNS("http://www.w3.org/2000/svg", "svg");
s.setAttribute("height", "100%");
s.setAttribute("version", "1.1");
s.setAttribute("viewBox", "0 0 36 36");
s.setAttribute("width", "100%");
var p_id = "zac-path-1";
// Apply shadow
var sh = document.createElementNS("http://www.w3.org/2000/svg", "use");
sh.setAttribute("class", "ytp-svg-shadow");
sh.setAttribute("href", "#" + p_id);
// Create icon path
var p = document.createElementNS("http://www.w3.org/2000/svg", "path");
p.setAttribute("id", p_id);
p.setAttribute("class", "ytp-svg-fill");
// Append path and shadow to SVG
s.appendChild(sh);
s.appendChild(p);
// Append icon to button
button.appendChild(s);
icon_path = p;
}
/**
* show_zoom_button_tooltip
* Shows the tooltip associated with the zoom button in a style mimicking that
* of the other YouTube player buttons.
* Parameters:
* show if false, the tooltip will be hidden instead of shown
*/
function show_zoom_button_tooltip(show=true) {
// Position calculations
var bbcr = button.getBoundingClientRect();
var tt_horiz_cen = bbcr.left + bbcr.width/2; // tooltip horizontal centre
var tt_top_offset = 57; // How far above the button should the tooltip be?
// For some reason, the existing tooltips are at a different offset in full-screen.
if(document.fullscreenElement) {
tt_top_offset = 75;
}
var tt_top = bbcr.top + bbcr.height/2 - tt_top_offset; // tooltip top
// YouTube has an existing tooltip DOM structure that it reuses for all of its
// player tooltips, but it's easier and more reliable to just create our own,
// using the same classes.
// Try to get our existing tooltip from DOM from previous run
var tt = document.getElementById("zac-tt");
var tt_text;
if(!tt) {
// Create tool-tip DOM structure if not present.
var mp = document.getElementsByClassName("html5-video-player")[0];
var tt_text_wrapper = document.createElement("div");
tt = document.createElement("div");
tt_text = document.createElement("span");
tt.setAttribute("class", "ytp-tooltip ytp-bottom");
tt.setAttribute("id", "zac-tt");
tt.style.setProperty("position", "fixed");
tt_text_wrapper.setAttribute("class", "ytp-tooltip-text-wrapper");
tt_text.setAttribute("class", "ytp-tooltip-text");
tt_text.setAttribute("id", "zac-tt-text");
tt.appendChild(tt_text_wrapper);
tt_text_wrapper.appendChild(tt_text);
mp.appendChild(tt);
} else {
// If DOM structure already present, get tooltip text.
tt_text = document.getElementById("zac-tt-text");
}
if(show) { // show
tt.style.setProperty("top", tt_top + "px");
tt_text.innerHTML = button.getAttribute("aria-label");
tt.style.removeProperty("display"); // show the tooltip
// Calculate horizontal position. Tooltip must be showing before
// its width can be queried.
var tt_width = tt.getBoundingClientRect().width;
tt.style.setProperty("left", tt_horiz_cen - tt_width / 2 + "px");
debug_log("tt_width = " + tt_width);
debug_log("tt_horiz_cen = " + tt_horiz_cen);
debug_log("tt left position = " + (tt_horiz_cen - tt_width / 2));
// Remove button title, else the browser may (will) display it as a
// tooltip, in addition to ours.
button.removeAttribute("title");
} else { // hide
tt.style.setProperty("display", "none");
tt_text.innerHTML = "";
button.setAttribute("title", button.getAttribute("aria-label"));
}
tooltip_showing = show;
// All of that just for a tooltip that matches the others. And it's
// still not perfect. Sheesh.
}
/**
* update
* Ensures the zoom button reflects the current state.
*/
function update() {
set_zoom_button_mode();
show_zoom_button_tooltip(tooltip_showing);
}
var button_object;
function add_button() {
right_controls = document.getElementsByClassName("ytp-right-controls")[0];
size_button = document.getElementsByClassName("ytp-size-button") [0];
if(right_controls && size_button) {
debug_log("Adding zoom and crop toggle button.")
// Remove existing button if present (sometimes it persists even after a page reload)
var existing_button = document.getElementById("zac-zoom-button");
if(existing_button) {
debug_log("Destroying old zoom and crop toggle button.")
right_controls.removeChild(existing_button);
}
// Create button
button = document.createElement("button");
button.setAttribute("class", "ytp-button");
button.setAttribute("id", "zac-zoom-button");
create_zoom_button_icon();
set_zoom_button_mode();
// Add button to controls
right_controls.insertBefore(button, size_button);
// Set event handlers
button.addEventListener("click", toggle_manual_enab);
button.addEventListener("mouseover", function(){show_zoom_button_tooltip();});
button.addEventListener("mouseout", function(){show_zoom_button_tooltip(false);});
button.addEventListener("focus", function(){show_zoom_button_tooltip();});
button.addEventListener("blur", function(){show_zoom_button_tooltip(false);});
button_object = {
update : update
}
} else {
// Keep trying until we have somewhere to put the button.
debug_log("Can't add zoom and crop toggle button yet. Retrying in 200ms.")
setTimeout(add_button, 200);
}
}
add_button();
return button_object;
}
// Initialise
watch_for_fullscreen();
watch_for_keypresses();
var zoom_button = create_zoom_button();