How to display a video of a web page at its native resolution?

jebez · 2025-08-07 20:04:35

Why is <video> of a web page (e.g. YouTube) resized, e.g. a 640x480 video resized 1440x1080 on your display?
<video> has a container (like width=100%) & by default it's video{object-fit:contain} of the user agent stylesheet of Falkon, or a web browser in general, but the very default (if nothing about video in the user agent stylesheet) is video{object-fit:fill} https://www.w3schools.com/css/css3_object-fit.asp .

Obviously the author of the web page can override the user agent stylesheet, e.g. on YouTube there's <video> , class , html5-main-video that points to a CSS rule containing object-fit:cover .

The solution: an user stylesheet:

<video> not fitted to its container:
Falkon, Preferences, Other, User Style Sheet, select a .css file within

video{object-fit:none!important}

or

<video> without container:
as above

video{width:auto!important
height:auto!important}

1st vs 2nd:
E.g. on YouTube: <video> not fitted to its container is centered to the player, without container is upper left.

An other solution:
Change video{object-fit:contain} of the user agent stylesheet of Falkon to video{object-fit:none!important} or other, modifying Falkon or its source code https://github.com/KDE/falkon , I not know where...

Also 2 other manual solutions:

If possible:
right click the video

Copy Media Address
Paste And Go
or
VLC, Media, Open location from clipboard, Video, uncheck Always Fit Window (once)
or Tools, Preferences, All, Video, uncheck Video Auto Scaling (always)

or

Save Media To Disk
play the video in Falkon or VLC.

If impossible:
get the URL of the video or download it (with yt-dlp)
play the video in Falkon or VLC.

video no-fit Chrome extension:
https://chromewebstore.google.com/detai … hkbjmjklng

https://chromium.googlesource.com/chrom … s/html.css the user agent stylesheet of Chomium/Chrome within video{object-fit:contain} .

Last edited by jebez (2025-08-27 06:19:04)

close2zero · 2025-08-08 01:05:34

A youtube video is not an AV-file in a container, but multiple video- and multiple audio tracks. It uses information about your device and bandwidth for compatibility reasons: to give you a suitable audio and video stream that match your device and bandwidth.

You can se this by using yt-dlp --list-formats "url of the youtube video". You can choose what audio and video-file you want to download using the correct switches, and merge into a container that suits you. I prefer mkv. But youtube will soon notice if you start using yt-dlp as is.

If you want to download the best video and best audio you can use this script I use that pretends that it is a firefox web browser (sat up to grab the best audio and best video):

#!/bin/bash

##  Use this script at your own risk.
##  This is my personal script and setup, and it
##  should be tweaked to match your preferences.

# Downloader that mimic Firefox-streaming
# This setup chooses the best AV quaality,
# and merges ti into a mkv container.

yt-dlp \
  --user-agent "Mozilla/5.0 (X11; Linux x86_64; rv:115.0) Gecko/20100101 Firefox/115.0" \
  --add-header "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8" \
  --add-header "Accept-Language: nb-NO,nb;q=0.9,en-US;q=0.7,en;q=0.5" \
  --add-header "DNT: 1" \
  --add-header "Connection: keep-alive" \
  --add-header "Upgrade-Insecure-Requests: 1" \
  --format "bestvideo[ext=webm]+bestaudio[ext=webm]/best" \
  --merge-output-format mkv \
  --output "%(title)s.%(ext)s" \
  --no-part \
  --throttled-rate 3M \
  --no-cache-dir \
  --embed-metadata \
  --no-mtime \
  --restrict-filenames \
  --no-playlist \
  --no-continue \
  --no-overwrites \
  "$@"

Save the script as:
yt-dlp-stealth.sh
Make it executable by:
chmod +x yt-dlp-stealth.sh
Run it like this:
./yt-dlp-stealth.sh "url of the youtube video"

If you want to choose another audio and/or video than the ones with best quality fie to download and merge you have to use the --list-formats switch, and then specify which of them you want to download in the script. Use yt-dlp --help to or man-pages to find what you need, and then tweak the setup of the script to match your preferences.

[Edit] Typo

Last edited by close2zero (2025-08-08 01:13:51)

jebez · 2025-08-08 06:11:27

Well my container https://www.w3schools.com/css/css3_object-fit.asp is not the same as your container https://en.wikipedia.org/wiki/Container_format ...

Well me to download a YouTube video just e.g.

yt-dlp -P /run/media/a/b06fb07d-9648-4c03-b276-995948f2751a https://youtu.be/CJ8_alfIHYI

in 1920x1080, the highest resolution...

Last edited by jebez (2025-08-08 06:12:34)

close2zero · 2025-08-08 07:10:27

But you can still use the --list-formats to get all the audio- and video track listed from the url source. Then you can edit the --format "bestvideo[ext=webm]+bestaudio[ext=webm]/best and choose what video- and audio track you want to stream or download. If you choose this approach for downloading you also need to use the --merge-output-format with the container of your choice. I use mkv just because it's a container that can handle almost all you throw into it.

cryptearth · 2025-08-08 07:29:50

writing your own youtube downloader is trivial - done so many years ago - still works

as for youtube site layout: because they designed it this way
yes, you can use browser extensions to modify the layout on the fly - but is it really that hard to just use your mouse and click fullscreen? isn't there even a keyboard shortcut for that, is there?

some people really like to overcomplicate things by asking the wrong question: whenever you start with Why? the answer always is either "because mother nature" or "because someone decided so" - and rarely "by accident"

Arch Linux

#1 2025-08-07 20:04:35

How to display a video of a web page at its native resolution?

#2 2025-08-08 01:05:34

Re: How to display a video of a web page at its native resolution?

#3 2025-08-08 06:11:27

Re: How to display a video of a web page at its native resolution?

#4 2025-08-08 07:10:27

Re: How to display a video of a web page at its native resolution?

#5 2025-08-08 07:29:50

Re: How to display a video of a web page at its native resolution?

Board footer