Archived topic
Page header video slider
5 replies · Started by Nikola on August 9, 2018
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. :)
This is actually the new way for page hero background video:
https://docs.generatepress.com/article/page-hero-background-video/
Let me know :)
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 :)