Sunday, August 12, 2018

Fix aspect ratio of online videos

My wife and I were watching Mr. Palfrey of Westminster on Acorn, and the aspect ratio on s2e1 was 11% off. It was really annoying me (especially before I realized it was just that one episode that was bad). So I wrote a little bookmarklet to adjust the aspect ratio of all html5 videos in a web page.

Here it is: Stretch Video.

To use it, drag it from the above link to your browser’s bookmark bar (which you can show and hide in Chrome with shift-ctrl-b). Then when you have the video on your screen, click on the bookmark and enter the horizontal and vertical stretch ratios, or the correct aspect ratio.

For full-screen video, try first resizing and then switching to full-screen (on some websites, like YouTube, there will be a one second delay before the video stretches on full-screen toggle). (On Firefox, you can also pull up bookmarks in full-screen mode with shift-ctrl-b, which helps.)

To cancel the effect, just reload your video page.

And for fun, here is a Video Rate bookmarklet (we wouldn't want to treat space very differently from time, would we?).

Public domain source code is here.

13 comments:

Philip Rand said...

An example of area preservation mapping...

Richie said...

Wow, this actually works

sahus said...

Thanks, this is the easiest solution for changing the aspect ratio of videos

Cassette said...
This comment has been removed by the author.
Cassette said...

Oh my word. This is the consummate solution. Thank you very much for posting this for others to use.

This is oh too common on the likes of YouTube with old or historic TV/film footage. They get loaded as widescreen. I simply followed Alexander's instructions on Firefox, entered a ratio of 4:3 and Blammo, the world is back in ratio.

I wonder if a generation of viewers are wondering why everyone prior to the 1990's was short and fat.

Alexander R Pruss said...

Apparently, there are people who find black bars really annoying. I guess they feel like their screen is wasting space. I find aspect ratio mismatch really annoying. Even 5-10% bothers me (like on my Kindle Fire).

Saqib said...

Thanks a lot. This is wonderful. Something I was looking for almost a decade.

Niffiwan said...

Thank you so much! This is really useful!

Niffiwan said...

Is there any way to get it to work for embedded videos in an iframe, if it is not same-origin?

I was hoping to maybe make it work with my site, animatsiya.net, because some studios annoyingly upload their videos in the wrong aspect ratio. But when I test it, it simply returns the "No video elements found in this page" message.

Alexander R Pruss said...

I don't know. One time I was adjusting things in an iframe, I just ended up going to the javascript console and grabbing the video element and adjusting it manually.

Niffiwan said...

Yes, I too think that adjusting the scaling of the iframe itself (just like in your code, but instead of grabbing all video tags, I grab the iframe's ID) is the simplest thing and seems to work well. I'm also giving it a set width and height and "overflow: hidden;".

I'm still tinkering with it a bit (I also want to make it work with fullscreen), but I'll post it here when I'm done.

Niffiwan said...

By the way, the Video Rate one doesn't seem to work. If I go to any Youtube or Dailymotion video, click on it, and enter a number, the whole page simply reloads and displays the number I entered. I tried it on Firefox and Chrome.

Alexander R Pruss said...

It works for me on Youtube.

This is what my bookmark says:

javascript:(function()%7Bvar vid %3D document.getElementsByTagName('video')%3Bif (vid.length %3D%3D 0) %7Balert("No video elements found in this page.")%3B%7Delse %7Bvar rate %3D prompt("Enter rate"%2C vid%5B0%5D.playbackRate)%3Bif (rate !%3D null)for(let v of vid)v.playbackRate %3D rate%3B%7D%7D)()