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.
20 comments:
An example of area preservation mapping...
Wow, this actually works
Thanks, this is the easiest solution for changing the aspect ratio of videos
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.
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).
Thanks a lot. This is wonderful. Something I was looking for almost a decade.
Thank you so much! This is really useful!
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.
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.
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.
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.
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)()
It seems not to be working anymore.
Does the popup show up?
this is wonderful! I can't thank you enough.
I created 2 bookmarks on the bookmarks toolbar and named them "4:3" and "1,1", changed the default values accordingly and now I can press them and change everything at will without refresh! Maybe I will make a "16:9" button too, because there are many "anamorphic" videos also.
cheers!
Can confirm that both of them work (Firefox). Also big thanks for introducing me to the concept of bookmarklets, I'm mindblown that I've never seen it before and already found other ways to make my life easier with them c:
Thank you so much! Easy and effective. It just works.
wow thank you so much
I've been using this bookmarklet for over 5 years now, and it is one of the first things I add after a fresh install of anything or new browser. I keep a 4:3 CRT monitor on my desk as a second display and this has solved such a seemingly simple yet obscure problem that no one else has even thought about, let alone fixed so eloquently. I just wanted to say thank you as I just added it again. And for anyone else still using a 4:3 monitor in 2024 if you want a perfect crop of a 16:9 encoded 4:3 video (or even just to crop an actual 16:9 video), the input you're looking for is "1.333,1.333". Thank you! I made an account just to say this lol that's how much it means to me.
Post a Comment