As I've babbled about before, one of my pet peeves is to find images and videos being displayed incorrectly -- that is, in a shape other than the one for which it was originally created. Just as the world was starting to settle on 16x9 being the shape of pretty much everything, phones and now even laptops began carving out gruesome holes and corners in their displays, to say nothing of the proliferation of hideous portrait-mode videos... But, that is a rant for another day.
Today, I'm sharing a hack which takes just a few seconds for fixing the many many YouTube videos floating around (plenty of which are otherwise quite nice) which incorrectly squash or stretch the image.
When you come across such a video, hit F12 or otherwise open your browser's developer tools. Don't let that phrase frighten you! The wonderful thing about the web (which corporate bullies at best ignore and at worst go to great lengths to hide) is that there is no meaningful difference between a viewer and a developer. There never was and never should be.
Use the DOM inspector and element picker to find the <video> element. YouTube's code updates properties of this element constantly, so making any changes here won't do us any good once we resize the window or use full-screen etc. So what we want to do is pick the next element upwards in the food chain, the <div> which contains the <video>. Simple enough!
When we select it, we can see that this <div> element has a few CSS (style) rules already. We're going to add one as follows:
transform: scalex(0.75) !important;
...And that's it! You can close the dev tools, toggle fullscreen and back, and the video which was being stretched out will now be presented in its intended, correct shape.
The fine print:
Scaling the X dimension to 75% is a number I pulled out of thin air which happens to look about right for 4:3 images being displayed at 16:9. Occasionally, you'll encounter videos for which you'll want different values than 0.75, or maybe even to use scaley() instead of scalex(). But most of the time, this is going to be (approximately) the right way to fix a stretched image.
No comments:
Post a Comment