Ultra wide video extension for youtube BADLY needed

[nTrophy]

Ok, so the problem is, while youtube technically supports ultra wide monitors (like 21:9 ratio) and it works perfectly fine when an uploaded video is actually 21:9, there are a LOT of dumb f*ks (including people working for major movie studios and record companies, apparently) who keep uploading ultra wide videos with black bars hard-coded into them (effectively turning them back into 16:9 aspect ratio). Meaning the actual video frame looks like this:

instead of looking the way it's supposed to look:

So when you go fullscreen on an ultrawide monitor showing a video coded like example 1, the monitor treats it the way an ultrawide monitor treats any other 16:9 video - it adds black bars on the sides. And while it's totally fine for actual 16:9 videos (720p, 1080p etc.) when you do it to a stupidly coded example 1 - you get this:

Anyways, there's a simple fix for that in Chrome:

https://chrome.google.com/webstore/detail/ultrawide-video/lngfncacljheahfpahadgipefkbagpdl

Can anyone please, PLEASE make a similar extension for Maxthon.

I'll be forever grateful. Hell, I'll buy you a coffee (or 10)

[A.S.]

5 hours ago, nTrophy said:

Can anyone please, PLEASE make a similar extension for Maxthon.

But what about youtube.com/new?

Edited September 22, 2017 by A.S.

[nTrophy]

6 hours ago, A.S. said:

But what about youtube.com/new?

Yeah, I'm currently using it.

Isn't it just their redesigned layout though?

I mean, it doesn't affect the way videos are rendered and shown, afaik.

Or am I missing something?

[A.S.]

5 hours ago, nTrophy said:

I mean, it doesn't affect the way videos are rendered and shown, afaik.

With new design you can open video in the middle of screen. With no black lines.
I hoped this is just a script, but this extension is too difficult for me.

[nTrophy]

5 hours ago, A.S. said:

With new design you can open video in the middle of screen. With no black lines.

How? I can't see an option to do that in the right-click menu:

It's also not in the video settings:

There's also "Theater mode" (the icon right after settings) but it just magnifies the video window from side to side, while doing nothing to fullscreen mode.

Are there other video settings I'm missing?

[7twenty]

20 minutes ago, nTrophy said:

Are there other video settings I'm missing?

I think there might be some confusion as to what the extension does. To my knowledge there's no option on YT that does what you want. So if the extension can be converted it should work, assuming that it also works with the new YT update.

I've had a quick look at it, it's a little beyond what i know as there's a couple of chrome API's that i'm not exactly sure how to to implement in MX. It might entice me to learn something more, so I might spend some time poking around.

[nTrophy]

2 hours ago, 7twenty said:

I've had a quick look at it, it's a little beyond what i know as there's a couple of chrome API's that i'm not exactly sure how to to implement in MX. It might entice me to learn something more, so I might spend some time poking around.

THANK you! And PLEASE do.

I mean, I would totally do it myself if that was even in the vicinity of what I'm capable of.

Unfortunately, my coding ability stops at concocting a couple of stupid widgets for an XWidget applet (both of them are pretty awesome for what they are, tbh, but it doesn't make me a coding guru lol)

Anyways, I think this issue I brought up is important. Not only because I personally have trouble with it, but because I imagine there's a large number of people who do as well (like, you know, every single person who bought an ultrawide monitor?). Youtube (or should I say Google) knows about this issue. It's been reported time and time again, I know that for a fact, yet ~literally~ years later since the first report, Google has done absolutely nothing to fix this problem.

If you use Chrome, you're in luck. That's the biggest browser on planet Earth, so when there's an issue - you should pretty much expect someone to fix it. If not through official updates, then through user extensions.

But I don't want to use Chrome! I've been the most loyal Maxthon supporter since before it was even called that. Yeah, I'm talking about you, MyIE. 2003, baby!

I tried to switch to Chrome numerous times through the years too. My line of thought was - I love MX, but you have to stick with the big boys. They'll be the ones left standing in the end, they'll get all the support, everyone else will just wither and die. But every single time I tried to switch, there was always this tiny little something about Chrome, like an unsupported feature I'd eventually miss, or a little quirk in its behavior that I'd f*/n detest.

So, anyways, MX has been my jam for the past 14 years. I'm not entirely sure why I'm even telling you all this. I guess I just want my favorite browser to be even better than it is right now.

PS: Sorry for the rant (^__^)v

Edited September 23, 2017 by nTrophy

[bayas]

Hi, @nTrophy

You don't have to wait any extension for this feature. Install Stylish extension and then add the following style.

@media screen and (device-aspect-ratio: 21/9) {
	.html5-video-player.ytp-fullscreen video {
		-webkit-transform: scaleX(1.33) !important;
	}
}

Here is a screenshot how to do. Don't forget to add youtube's domain in "Rules" section.

Edited September 25, 2017 by bayas
code updated.

[nTrophy]

On 9/25/2017 at 0:46 AM, bayas said:

You don't have to wait any extension for this feature. Install Stylish extension and then add the following style.

OMG! Thank you SO much! I had no idea an extension as awesome as Stylish even existed!

I had to tweak your code a bit, but I made it work.

The original script did nothing, so I did dome digging.

First stop was my screen aspect ratio. Apparently, 21:9 was not actually it (my resolution is 3440:1440) so I just put that instead of "21/9" for the script to detect it.

Then I removed the "X" from "scaleX", because it was just stretching the video horizontally leaving bars on top and bottom.

"Scale" command, on the other hand, stretched the video on both axes - X and Y.

And the last thing I did is I changed the scale amount to 1.345, because that's the exact zooming that gets you a fullscreen experience with my resolution.

Dude, you f*n rock! Thank you so much for your help!

[bayas]

11 hours ago, nTrophy said:

Dude, you f*n rock! Thank you so much for your help!

You're welcome, I'm glad I was able to help. Actually you don't need media query starts with "@media..", you can only use inner style code. If you want to use your style in different devices, then update it like below. You may need to adjust scale amounts for each resolution.

@media screen and (device-aspect-ratio: 3440/1440) {
	.html5-video-player.ytp-fullscreen video {
		-webkit-transform: scale(1.345) !important;
	}
}

@media screen and (device-aspect-ratio: 1920/1080) {
	.html5-video-player.ytp-fullscreen video {
		-webkit-transform: scale(1.333) !important;
	}
}

@media screen and (device-aspect-ratio: 1024/768) {
	.html5-video-player.ytp-fullscreen video {
		-webkit-transform: scale(1) !important;
	}
}

 

Edited September 27, 2017 by bayas
missed words.

[vladimer08]

Is it possible to do this for twitch.tv?

[bayas]

21 hours ago, vladimer08 said:

Is it possible to do this for twitch.tv?

Hi @vladimer08 I wrote the following style for you. You can edit the scale value and aspect ratios what you need.

@media screen and (device-aspect-ratio: 3440/1440) {
	.player[data-isfullscreen="true"] video {
		transform: scale(1.345) !important;
		-moz-transform: scale(1.345) !important;
		-ms-transform: scale(1.345) !important;
		-webkit-transform: scale(1.345) !important;
	}
}

@media screen and (device-aspect-ratio: 1920/1080) {
	.player[data-isfullscreen="true"] video {
		transform: scale(1.333) !important;
		-moz-transform: scale(1.333) !important;
		-ms-transform: scale(1.333) !important;
		-webkit-transform: scale(1.333) !important;
	}
}

@media screen and (device-aspect-ratio: 1024/768) {
	.player[data-isfullscreen="true"] video {
		transform: scale(1) !important;
		-moz-transform: scale(1) !important;
		-ms-transform: scale(1) !important;
		-webkit-transform: scale(1) !important;
	}
}

[vladimer08]

Thanks! Here is my version. 

Domains: twitch.tv

@media screen and (device-aspect-ratio: 2560/1080) {
    .player[data-isfullscreen="true"] video {
        transform: scaleX(1.345) !important;
        -moz-transform: scaleX(1.345) !important;
        -ms-transform: scaleX(1.345) !important;
        -webkit-transform: scaleX(1.345) !important;
    }
}

Domains: youtube.com
@media screen and (device-aspect-ratio: 2560/1080) {
    .html5-video-player.ytp-fullscreen video {
        transform: scaleX(1.345) !important;
        -moz-transform: scaleX(1.345) !important;
        -ms-transform: scaleX(1.345) !important;
        -webkit-transform: scaleX(1.345) !important;
    }
}

I hope it will be useful.

[vladimer08]

Hi guys! The script for twitch.tv does not work anymore. can you help me?