Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Page Header Background Video Shows Flash of Page Background Color

Home Forums Support Page Header Background Video Shows Flash of Page Background Color

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #318402
    donnacavalier

    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.

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #318455
    Tom
    Lead Developer
    Lead Developer

    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.

    #318466
    donnacavalier

    (on dev server)

    Let me know if you need login info. Guessing I shouldn’t give that out here. 🙂

    #318530
    Tom
    Lead Developer
    Lead Developer

    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.

    #318598
    donnacavalier

    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.

    #318599
    donnacavalier

    Nope, has the same effect. White flash even though image is black.

    #318634
    donnacavalier

    Problem solved. Body background black, content white, AND content width wider to fill screen, with extra padding…it all worked out perfectly. Thank you.

    #318698
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.