Pro Header Video - Fill Space?

Hi.

I have placed a YouTube video within the Pro header and would like it to fill the space. Right now it has black bars that show up on the edges when someone re-sizes the browser. The video I’m using is landscape in orientation and looks great at some sizes.

I’m also placing the menu at the bottom of the video.

How can I lock the video so that it fills the space equally?

OR would it be better to use slider revolution for the video? If so, how can I get the menu along the bottom of the slider Revolution screen and have it switch to the top once someone scrolls past the video?

Thank you.

Hi @CInno,

Thank you for writing in, I suggest that you use the Revolution Slider to add the Background Video and add the additional information as a slide. Then use the Above Masthead feature to add the Revolution Slider to the page in question.

Revolution Slider does the best job for the Responsive video feature. Please read the articles below for more information:

https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

Please set your menu Bar as Sticky Bar

Hope it helps,
Cheers!

Hi, thank you!

Because I’m switching from bottom of the screen to the top with the header, I was hoping to use a different orientation. For instance, two rows with different color backgrounds and social links. Is that possible?

Hi @CInno,

Sorry, but I am not entirely certain of what you’re trying to do. Please provide us with more information and perhaps a screenshot or a mock-up of your design.

Thanks,

Hi,

I apologize for not being clear.

On the home page I want to place a full screen video that plays when people visit the site. I want the header to be at the bottom of the screen. When people scroll down on that page, I want the header to shift to the top. The trick is that the header will look different at the top than the bottom. Please see the attached (very rough) screen shots.

Thank you.

Hi @CInno,

Thank you for the clarification, to do that, you need two Bars (for the fullscreen video and menu), setup the first bar like this:

This will make the bar fullwidth with height responsive to the slider.

On the second bar assign an ID menubar

We will going to use this ID later on the slider settings, to offset the height of this bar so it will be minus to the height of the fullscreen slider, resulting for the Slider and Menu bar to fit on the above fold screen.

Now on your slider settings, set the Slide Layout to Full-Screen

This is the option that will make your slider full-screen.

Now to offset the height of the menu bar. Still, on Slider Settings find the option Increase/Decrease Fullscreen Height and enter #menubar (yes, with the number sign), I will look a little bit off if you preview it as a login user because of the black Wordpress bar that adds height to the header.


Don’t forget to turn On the Sticky Bar option of the second, so when you scroll past the video the second bar will stick to the top.




How you create your slider and style the second bar will be now up to you. If you need a sticky bar to have a different styling or layout from the initial menu bar, then please create a 3rd bar that will serve as the sticky bar.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.