CODEWITHSUNDEEP
javascriptcsshtmlhtml5-video
Andrei Rosca
Andrei Rosca

Reputation: 1097

Matching video background to page background

I have a video playing inline with an orange background and would like to make it seamlessly merge with the body css background. Unfortunately the video color always stands out depending on browser or the monitor color profile. Any idea how to achieve this?

I tried 3 solutions till now:

  1. Hardcoding the background color for each browser. This works on the same machine but when using a different monitor with a different color profile, it falis.
  2. I took the first video frame and placed it into a canvas. Then i took the background color from canvas and applied it to the body. This works everywhere except for safari.
  3. Instead of having a css background color, i used a second video with the same background and stretched it to match the page size (so it's under the first video and acts like a background). Also works everywhere except safari.

Is there anything i'm missing? Any other ideas? Any clues on why almost everything i try fails on safari?

Upvotes: 2

Views: 1730

Answers (2)

Andy
Andy

Reputation: 6115

It's not possible to find out the different colours that all browser/player/platform combinations produce (neither beforehand, nor during runtime).

So the only workaround I can think of is to use the video as the entire background and include sufficient white-space in the video.

One example with CSS3 to make the video cover your container:

.container {
  position: relative;
}
.background-video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  object-fit: cover;
}

To have more control of the position and size of the video's center (focal point), you'll need to replace object-fit with your own positioning rules.

Video weight (MB) won't grow much, since the background is a solid colour and doesn't change from frame to frame.

Upvotes: 0

jhsveli
jhsveli

Reputation: 63

In my experience, this can be caused by hardware acceleration decoding the video. To confirm if this is the issue in your case, you can temporarily disable HA in your browser.

In Chrome, paste this into the address bar

chrome://flags/#disable-accelerated-video-decode

In Internet Explorer, there is a setting in Internet Options > Advanced called Use software rendering instead of GPU rendering

Unfortunately I was able to find a solution for the issue in my case, since we have precious little control over this part of a visitor's configuration. In our case we settled on a design that didn't involve a seamless merge between a video background and an html element's background.

Upvotes: 1

Related Questions