Fix Aspect Ratio Of Online Videos - Alexander Pruss's Blog
Có thể bạn quan tâm
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.
Labels: aspect ratio, film, programming, television, video20 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)()
CzechRiot said...It seems not to be working anymore.
Alexander R Pruss said...Does the popup show up?
vrekman32 said...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!
4eeee said...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:
Rodolfo said...Thank you so much! Easy and effective. It just works.
Bobflob said...wow thank you so much
Wols said...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.
Newer Post Older Post Home Subscribe to: Post Comments (Atom)About Me
Alexander R Pruss I am a philosopher at Baylor University. This blog, however, does not purport to express in any way the opinions of Baylor University. Amateur science and technology work should not be taken to be approved by Baylor University. Use all information at your own risk. View my complete profileMy Books
- Norms, Natures, and God (in progress)
- Infinity, Causation and Paradox
- Necessary Existence (with Josh Rasmussen)
- One Body: An Essay in Christian Sexual Ethics
- Actuality, Possibility and Worlds
- The Principle of Sufficient Reason: A Reassessment
- The Existence of God (coedited with R. M. Gale)
Other Stuff By Me
- Amateur astronomy blog
- Instructables
- Right Reason posts (archived)
- Thingiverse designs
Recent Comments
Blog Archive
- ► 2024 (186)
- ► November (9)
- ► October (14)
- ► September (22)
- ► August (10)
- ► July (14)
- ► June (13)
- ► May (20)
- ► April (23)
- ► March (19)
- ► February (28)
- ► January (14)
- ► 2023 (191)
- ► December (11)
- ► November (18)
- ► October (23)
- ► September (16)
- ► August (13)
- ► July (8)
- ► June (15)
- ► May (13)
- ► April (19)
- ► March (20)
- ► February (18)
- ► January (17)
- ► 2022 (180)
- ► December (15)
- ► November (23)
- ► October (21)
- ► September (13)
- ► August (15)
- ► July (8)
- ► June (16)
- ► May (11)
- ► April (12)
- ► March (19)
- ► February (16)
- ► January (11)
- ► 2021 (234)
- ► December (12)
- ► November (32)
- ► October (29)
- ► September (30)
- ► August (19)
- ► July (17)
- ► June (17)
- ► May (17)
- ► April (22)
- ► March (17)
- ► February (6)
- ► January (16)
- ► 2020 (250)
- ► December (7)
- ► November (25)
- ► October (17)
- ► September (25)
- ► August (31)
- ► July (22)
- ► June (17)
- ► May (28)
- ► April (25)
- ► March (17)
- ► February (19)
- ► January (17)
- ► 2019 (228)
- ► December (11)
- ► November (19)
- ► October (19)
- ► September (28)
- ► August (20)
- ► July (16)
- ► June (7)
- ► May (22)
- ► April (27)
- ► March (16)
- ► February (17)
- ► January (26)
- ► 2017 (261)
- ► December (12)
- ► November (32)
- ► October (25)
- ► September (28)
- ► August (21)
- ► July (17)
- ► June (14)
- ► May (19)
- ► April (21)
- ► March (25)
- ► February (23)
- ► January (24)
- ► 2016 (271)
- ► December (17)
- ► November (16)
- ► October (23)
- ► September (28)
- ► August (27)
- ► July (18)
- ► June (21)
- ► May (22)
- ► April (27)
- ► March (21)
- ► February (29)
- ► January (22)
- ► 2015 (245)
- ► December (16)
- ► November (21)
- ► October (23)
- ► September (23)
- ► August (17)
- ► July (16)
- ► June (14)
- ► May (25)
- ► April (28)
- ► March (22)
- ► February (21)
- ► January (19)
- ► 2014 (247)
- ► December (14)
- ► November (16)
- ► October (24)
- ► September (17)
- ► August (22)
- ► July (18)
- ► June (24)
- ► May (18)
- ► April (26)
- ► March (31)
- ► February (18)
- ► January (19)
- ► 2013 (276)
- ► December (21)
- ► November (22)
- ► October (27)
- ► September (20)
- ► August (22)
- ► July (24)
- ► June (22)
- ► May (16)
- ► April (30)
- ► March (29)
- ► February (24)
- ► January (19)
- ► 2012 (254)
- ► December (19)
- ► November (24)
- ► October (23)
- ► September (22)
- ► August (25)
- ► July (16)
- ► June (14)
- ► May (19)
- ► April (22)
- ► March (22)
- ► February (24)
- ► January (24)
- ► 2011 (275)
- ► December (22)
- ► November (31)
- ► October (25)
- ► September (21)
- ► August (28)
- ► July (19)
- ► June (18)
- ► May (19)
- ► April (18)
- ► March (23)
- ► February (29)
- ► January (22)
- ► 2010 (298)
- ► December (24)
- ► November (24)
- ► October (29)
- ► September (27)
- ► August (22)
- ► July (23)
- ► June (26)
- ► May (32)
- ► April (27)
- ► March (21)
- ► February (20)
- ► January (23)
- ► 2009 (297)
- ► December (19)
- ► November (25)
- ► October (28)
- ► September (22)
- ► August (27)
- ► July (27)
- ► June (23)
- ► May (19)
- ► April (30)
- ► March (30)
- ► February (26)
- ► January (21)
- ► 2008 (323)
- ► December (26)
- ► November (24)
- ► October (24)
- ► September (28)
- ► August (22)
- ► July (22)
- ► June (28)
- ► May (30)
- ► April (29)
- ► March (30)
- ► February (26)
- ► January (34)
- ► 2007 (72)
- ► December (32)
- ► November (24)
- ► October (16)
Blogs and Links
- Disputations
- First Things
- Foster's Theological Reflections
- Library of Historical Apologetics
- Matters of Substance
- metaphysical values
- Philosophia Perennis
- Philosophical Orthodoxy
- Philosophy of Cosmology
- Prosblogion
- Return to Rome
- wo's weblog
Labels
| SubscribeSubscribe in a reader |
More Things by Me
- My Instructables
- My home page, with papers
- Old posts on RightReason
- Prosblogion philosophy of religion group blog
Từ khóa » Html5 Video Stretch Aspect Ratio
-
HTML 5 Video Stretch - Stack Overflow
-
HTML5-video-stretch-fullscreen.css - Gists · GitHub
-
Fluid Width Video | CSS-Tricks
-
Html5 Video Stretch? [SOLVED] - DaniWeb
-
HTML 5 Video Stretch - Newbedev
-
HTML 5 Video Stretch - Anycodings
-
How To Make Html5 Video Responsive? - Digi Effects
-
CSS Object-fit Property - W3Schools
-
Aspect-ratio - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
-
Emulating Background-size: Cover For HTML5 Video (CSS Only)
-
deoHeight - Web APIs - MDN Web Docs
-
The Complete Guide To Understanding Video Aspect Ratios - Dacast
-
Video Fit To Screen Html
-
Css – Make HTML5 Video Poster Be Same Size As Video Itself