Pro Header: Background video height on mobile

[cwtraders]

Hey there,

I’m using a video in the background of a Pro Header on one of my webpages: https://phoenixtradinggr.wpstagecoach.com/

When the screen width gets below ~690px, black strips begin to appear above and below the video. The full width of the video remains visible at all times, whereas I would like the video to fill the full height of the header section (and the width can be cropped as necessary).

Can you please share any CSS or insight for how to correct this?

Thank you.

[thai]

Hi There,

I couldn’t replicate this issue on my end:

Please try remove the padding of your bar by adding the no-padding CSS class then add the following CSS under Theme Options > CSS:

.no-padding {padding: 0 !important;}

If it doesn’t help, please provide us with your admin account so we can take a closer look.

Thanks.

[phoenix]

Hey @thai,

(I posted the original question, I’m just logged into another Apex account).

I’m not sure what you’re looking at, the screenshot you’ve posted is not the website which I linked to in my original post.

I have attached a screenshot from the website which shows the issue:

As you’ll see, the video doesn’t fill the full height of the section. Please advise how to do this.

Thanks.

[christopher]

Hi Aaron,

Unfortunately, there is nothing we can do with CSS code as you enabled the Parallax feature. The Parallax feature uses the Javascript code to change the position of the background in real time in scrolling and for that happening it is needed that the background is in a normal mode and not the cover mode which you asked for.

You either can have the Parallax feature and have the black stripes or turn the parallax feature off and have the background cover the whole container.

Thank you.

[phoenix]

@christopher.amirian, I have disabled Parallax, but the issue still persists. There now appears black space on the left and right sides of the video when the screen is wide too. When the screen is narrow, the black lines remain top and bottom.

Can you please take another look and let me know what settings need to be adjusted for the video to fill the full space?

Thanks a lot.

[christian]

Hey Aaron,

You applied the video background to the container. If your goal is to cover the full space, you should apply it to the bar. Please also update to the latest version of Pro. To avoid update issues, follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

Thanks.

[phoenix]

@christian_y, thanks for your suggestion.

I have now updated to the latest version of Pro and I have applied the video background to bar (rather than container). The same issue still remains.

Can you please take a closer look at how I can make the video fill the space (height and width)?

Thanks.

[thai]

Hi There,

Would you mind providing us with your admin account so we can take a closer look?

Thank you.