Archived topic
Page Header Background Video Shows Flash of Page Background Color
7 replies · Started by donnacavalier on May 15, 2017
Summary: I need the page header background to be a different color from the site background AND I need the page header background video to play.
Details: I am using a video as a background in the Page Header addon for the front page.
In the Page Header settings, I've set the Content background color to #000000 because the background color of the site is #ffffff, which is a problem for the header. The video has a black background, so in the time it takes to load, the header first shows white, then switches to the video once loaded. If the header background color was black, this "flash" from white to black would be pretty much unnoticeable.
But everything I've tried (and I've tried a lot of things today) fails. If I set background color to black in the CSS, then it overrides the video background, and the video is never seen (setting z-index hasn't seemed to help). I've even tried adding an extra div via hooks surrounding the header, setting that div to black background, thinking that would help, but it didn't.
Content settings: Containter type is full width, everything else is off, and background color is black.
Advanced settings: Merge with site header is on, everything else is off.
There's bound to be a way to use a header background color that differs from the site's background color, so that the header background color shows while the video background is loading. But I cannot find that way. Help appreciated.
Can you possibly link me to the page? I have a couple ideas but would need to try them out.
I know one way would be to upload a background image (the image tab in Page Header), as it will then be used as the "poster" for the video.
[url removed once problem solved] (on dev server)
Let me know if you need login info. Guessing I shouldn't give that out here. :)
Give this a shot:
.generate-merged-header .site-header {
background-color: #000;
}You can use my Simple CSS plugin to add it on that page only.
Yeah, I tried that. But the black takes precedence and the video is not shown. I'll try the backgound image and see if that works.
Nope, has the same effect. White flash even though image is black.
Problem solved. Body background black, content white, AND content width wider to fill screen, with extra padding...it all worked out perfectly. Thank you.
Glad you got it working :)
