Site logo

Archived topic

Page header video slider

5 replies · Started by Nikola on August 9, 2018

Viewing posts 1–6 of 6

Hello Tom,

I can't figure out how to create full-screen header video slider like one in this website https://antoni.de/ .

Do you have some tips?

Thank you.

Best regards,
Nikola

Hi there,

If you are using GPP 1.6.2, then you can use our page header add-on:
https://docs.generatepress.com/article/page-header-overview/
https://docs.generatepress.com/article/page-header-background-video/

With full screen option:
https://docs.generatepress.com/article/page-header-content/#fullscreen

Please note that the page header module will be replaced with Page Hero starting in GPP 1.7:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-background-video/

We are hoping to release 1.7 next Monday. So I would recommend either become a beta tester and you can use the module first:
https://docs.generatepress.com/article/beta-testing/

or wait until Monday :)

Let me know if this helps :)

Thank you Leo. But how to make a hero header video slider with the element? I want a couple full-screen videos with some text layers on page header? Thank you. :)

Note that the video won't play on a mobile device. In order to have the poster image display nice on your mobile device, I would suggest you add to the css the following (I tested this specifically on my iPhone so you might want to take this a step further and test on other devices including tablets):

@media( max-width: 480px ) {
    video[poster] {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

Otherwise, your poster image may simply be zoomed in on an irrelevant portion of the image.

Thank you! Added this to the article :)

This archived topic is closed to new replies.