Jump to content

Web app video backdrops on wide screen fix could be added.


Recommended Posts

When viewing the details page on an ultra wide screen monitor,  the background video will not meet the edges of the screen. It looks like a 4:3 video on a regular wide screen.


Upon trying different video stretching (which looked horrible) I found that the best way to make everything look good was to edit the 'backgroundContainer' with a linear gradient which moves from a dark color, to an almost transparent back to a dark color:

    backgroundContainer.style = 'background-color: none; background: linear-gradient(94deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0.3) 49%, rgba(0,0,0,0.3) 51%, rgba(0,0,0,1) 85%, rgba(0,0,0,1) 100%);';

It covers up the box look  of the video backgrounds by blending the edges into the video :)


It also does not effect regular wide screen displays, it looks normal.


I'd post a picture but it gets to distorted... you'll have to take my word for it :)



Link to comment
Share on other sites

When this happens it's all black behind it, right?

Yes, but the sides of the video are still noticeable.


I think too, it could be attributed to the blacks of the video being lighter then the dark color of the background.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...