Archived topic
Header Video overlaps into content container
7 replies · Started by Joseph on September 30, 2020
I added a header element(podcast title) to display a video background in the header section. That works well however the video background also appears in the title section of the post archive page. I've tried to style with CSS to #ffffff background when I use div.vidbg-overlay it will add the white background but adds it to the header video as well.
You can view the issue on the attached link.
Thank you in advance.
Hi there,
can you share the code you have added to your header element ?
Hey David, thanks for your reply.
[vidbg container="header" mp4="https://lovingliberty.net/staging/wp-content/uploads/2020/09/Copy-of-Copy-of-Copy-of-Loving-Liberty-Facebook-1.mp4" webm="#" poster="https://lovingliberty.net/staging/wp-content/uploads/2020/09/mobile_bg.jpg" muted="true" loop="true" overlay="false" overlay_color="#000" overlay_alpha="0.3"]
Are you using a plugin for that shortcode ?
Yes David
It's called Video Background.
I was able to use CSS to override the video overlay on the other posts.
.entry-meta {background: #ffffff!important;}
.separate-containers .inside-article .vidbg-overlay{background:#ffffff!important;}
But can't seem to get these categories to respond to the CSS.
Hmmm... i wonder how its targeting the element for it to display i assume it is this attribute in the shortcode:
container="header"
What happens if you use:
container="site-header"
David found the solution. In the header section of the shortcode I used an ID of #masthead and that did the trick.
Thank you for your time on this, much appreciated.
Glad to hear that !
