Background
It's now relatively common for YouTube videos to have wide aspect ratios greater than 16:9, such as 18:9 or other "ultrawide" or cinema aspects. By default, if these are played full-screen on a display with a narrower aspect ratio, they are letterboxed with horizontal black bars at the top and bottom. Depending on circumstances, video content and user preference, this might be annoying. It might be preferable to fill the screen height and crop off the sides of the video instead.
The same issue arises when watching ordinary widescreen 16:9 videos on a 16:10, 5:4, 4:3 or other narrower aspect ratio display. This script is targeted at both use cases.
This is not a script to fix 'baked-in' letterboxing, where the black bars are part of the actual video. It only helps in the case where YouTube has added the black bars to make the video fit on your screen.
How it works
When the video goes full-screen, and thereafter each time the video element on the page 'mutates', the script will adjust the dimensions of the video element. If the video has a wider aspect ratio than the screen, it will be adjusted so that it fills more of the screen height and is wider than the screen. Any excess video width falls outside of the edge of the screen (i.e. it gets cropped off). The zooming/stretching maintains proportion, so objects in the video will not be distorted, just larger than they were before. Upon leaving full-screen, the script stops applying zoom and stops watching for video element mutations.
Zoom can be toggled on and off by pressing the button that gets added to the video player controls, or by pressing a keyboard shortcut key. It is also possible to use this to enable zoom outside of full-screen mode.
Contrary to the name of the script, for screens narrower than 16:10, the script will still apply some letterboxing by default to avoid large amounts of cropping. If this is not desirable, edit the script to change the definition of min_cropped_aspect (see below).
Compatibility
The script should function with any screen aspect ratio, but see above regarding screens narrower than 16:10.
This script probably requires a relatively recent browser version. It may work in browsers other than Firefox and Chrome, but that is untested.
It is for the current (not classic) version of YouTube, as of December 2018.
N.B. This script does not do anything to fix videos with 'baked-in' letterboxing, where the video itself contains the black bars.
Configuration parameters
There are a number of optional user-configurable parameters near the top of the script. (Unfortunately, these will be overwritten each time you update the script.) You don't have to change any of these, but they are available in case you have particular preferences.
min_cropped_aspect
Sets the minimum (narrowest) aspect ratio of the visible portion of the video that results from zooming and cropping:
- To completely eliminate letterboxing, set
min_cropped_aspect to a value equal to or less than your screen aspect ratio.
- If you set
min_cropped_aspect to a value greater than your screen aspect ratio, then videos wider than your screen will be zoomed and cropped so that the visible portion of the video frame has the specified aspect ratio.
Specify aspect ratios as width/height fractions, such as 16/9.
max_crop_proportion
If you find that very wide videos are being cropped too much, try editing the definition of max_crop_proportion to specify what proportion of the width of a video you are prepared to lose to cropping. For example, a value of 0.25 will allow no more than one quarter of the width of a video to be cropped away. By default, no limit is set.
player_aspect
This parameter has no effect except when using zoom outside of full-screen mode. Normally, outside of full-screen mode, videos would be contained in a player having either a 16:9 aspect or the same aspect as the video itself, the latter of which makes zoom and crop useless.
- Set
player_aspect to 0 (zero) to have the player adopt the same aspect ratio as your screen when zoom is enabled.
- Set
player_aspect to an aspect ratio to have the player adopt that aspect ratio when zoom is enabled.
Specify aspect ratios as width/height fractions, such as 16/9.
def_zoom_n
Sets the default zoom state outside of full-screen mode. true means zoom enabled, false means disabled. Default is false.
def_zoom_f
Sets the default zoom state in full-screen mode. true means zoom enabled, false means disabled. Default is true.
zoom_shortcut_key
Specifies which keyboard key should be used to toggle the zoom state. Default is z.
Known Issues
Keyboard shortcut (default 'z') is captured even when typing in a text field. So, for example, if you type a word containing the letter 'z' in a video comment, the video's zoom/crop status will toggle!
Usability bug: With the default configuration, when watching videos with an aspect ratio of 16:9 or narrower, outside of full-screen mode, it looks as though nothing is happening when you try to turn on zoom and crop. This is because, outside of full screen, the default is to crop the video to 16:9. If the video is already 16:9 or less, then it will look as though nothing is happening. The default was intended mainly for 18:9 videos. The default can be changed (see "player_aspect" under Configuration parameters, above).
Zoom and crop doesn't work with videos located on a channel page (as opposed to a video page or an embedded video) but the zoom and crop button still shows. (Either it should work, or there should be no button.)
It appears that YouTube's video resolutions are optimised for letterboxed playback. So, for example, an 18:9 video played at "1080p" will actually have a resolution of 1920x960. This is pixel-perfect for letterboxed playback on a 1080p screen, but, when zoomed and cropped to fill a 1080p screen, the effective resolution is 1707x960. Seeing the label "1080p", you might assume you were seeing a 2160x1080 video, which would crop down to exactly 1920x1080 with no scaling required. If the video is available in resolutions higher than that of your screen and your hardware and internet connection can handle it, then it is possible to work around this by selecting a higher resolution. 1440p 18:9 will give 2560x1280 playback, while 2160p '4k' 18:9 will give 3840x1920, which has the double distinction of being neither 2160 lines high, nor 4000 pixels wide. Aren't video resolutions fun. Alternatively, many people (the author being among them) may not find this to be a major problem in the first place, whether through poor eyesight or high tolerance for fuzzy-looking video.
Prior to version 0.6.3, the button for controlling zoom was not correctly added to the player controls if they were slow to load or if the user navigated to a video from another YouTube page (as opposed to loading the video directly). The resulting error caused the script to fail to operate.
Prior to version 0.6.3, the zoom toggle hotkey was case-sensitive. (So it wouldn't work with caps-lock enabled!)
Prior to version 0.6.2, the script did not work with embedded videos on other sites. (https://www.youtube.com/embed/*)
In versions below 0.5, sometimes the end of ad playback did not trigger the zoom. Manually exiting and re-entering full-screen could be used as a workaround to trigger the application of zoom. Fixed in version 0.5.
In versions below 0.5, zoom was not applied when replaying a video, skipping back into the video after the video ends, jumping directly to a new video without exiting full-screen mode, or going into full-screen mode before the video had actually loaded. Fixed in version 0.5.
In versions below 0.5, there was general intermittent unreliability. Hopefully much improved in 0.5.
Version history
0.1. First release. Probably full of bugs and stupid mistakes.
0.2. Fix incompatibility with Chrome.
0.3. Added min_cropped_aspect and max_crop_proportion parameters. Changes default behaviour for screens narrower than 16:10.
0.4. Bug fix: don't just match /watch pages, as it's possible to reach them from other YouTube pages without a page load occurring.
0.5. Redesigned to trigger on changes to the video element, to improve reliability and remove bugs.
0.5.1. Changed @namespace to a more unique value. Apologies for any inconvenience this may cause to existing users.
0.6. Added a zoom toggle function and the ability to enable zoom outside of full-screen.
0.6.1. Bug fix for zoom toggle button not reflecting state if the player controls were slow to load.
0.6.2. Script now works for embedded videos (https://www.youtube.com/embed/*).
0.6.3. Bug fix for zoom toggle button not reflecting state if the player controls were slow to load, and zoom toggle hotkey is now case-insensitive.
0.6.4. Now works with youtube-nocookie.com embedded videos.
