Video Headers has extra space when resizing browser


I’ve come across a problem I’ve spent entirely too much time trying to resolve unsuccessfully. Perhaps someone can help me:

When the main page has a video in the header, there is extra space that shows at the bottom, and when resizing the browser, that space changes dynamically, usually getting bigger as the window narrows.

I’ve tried all kinds of CSS changes to the child theme to try to remove that extra space, but the action of resizing the browser always resets any CSS definition and adds the space again. I figure it’s a JS script updating the DIV in which the video is in, but I can’t find it.

So the question is: How do I make sure that the div enclosing the video playing on this page: ( remains the same height as the video’s height?



Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

#masthead.has-video {
    height: 100% !important;
    background: white !important;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Awesome! I was trying to do something like that, just missing the right CSS definitions… (was using “auto” instead of “100%”, and not using “important!”

Anyway, it Worked beautifully.


You are welcome!

I’m glad that it worked :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.