Video in header element

[ch1800]

Hi there,

A couple of questions about video headers:

– How to use a video instead of a picture in this homepage header element?
– Is the process similar as for page hero here:
https://docs.generatepress.com/article/page-hero-background-video/
– do I need to host the video or can use a youtube link?

Thanks.

[David]

Hi there,

that doc is the correct method for adding videos.
The video has to be self hosted

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

Thanks, just testing but not very successful so far…
Is there a way to make the video I added there full width responsive?
I kept the element’s overlay grey color just for reference.

[David]

Try changing this CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

for

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    height: 100vh;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

On laptop I get an empty space at right and on resizing to smaller screens the video is not responsive: it just keeps its height but the width is cut.

[Leo]

Can you try this instead:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

This one works great on desktop but when resizing for smaller screens it gets an empty space below but keeps responsiveness. I maybe need to adjust the element’s settings?

[David]

Disable the full height option in the header element and give the element some % top and bottom padding. Try 28% in each. This will keep the height responsive.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

By “full height” you mean the option “full screen”, right?
I did that but with those values I was getting an empty space below in some screen sizes.

I tested with different values and found that what fits best is 28% for top and 14% for bottom paddings. What do you think?

Also, I see that there is still an Offset Site Header Height left over from previous settings, with values of 105px for desktop and 70px for mobile. Should I leave it as is?

[David]

If you set the Offset to 0.
Then 28% top and 28% bottom ( ie a Total of 56% ) should work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

Great, you are right, that works fine now.
Many thanks for your precious help guys!

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts