- This topic has 11 replies, 3 voices, and was last updated 7 months, 1 week ago by
David.
-
AuthorPosts
-
June 17, 2020 at 5:18 am #1331124
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.
June 17, 2020 at 6:08 am #1331175David
StaffCustomer SupportHi there,
that doc is the correct method for adding videos.
The video has to be self hostedDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 17, 2020 at 7:50 am #1331443ch1800
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.June 17, 2020 at 8:03 am #1331461David
StaffCustomer SupportTry 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/June 17, 2020 at 8:12 am #1331473ch1800
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.
June 17, 2020 at 2:03 pm #1331852Leo
StaffCustomer SupportCan 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/June 17, 2020 at 6:42 pm #1332003ch1800
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?
June 18, 2020 at 1:19 am #1332244David
StaffCustomer SupportDisable 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/June 18, 2020 at 2:37 am #1332331ch1800
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?
June 18, 2020 at 2:49 am #1332362David
StaffCustomer SupportIf 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/June 18, 2020 at 3:01 am #1332382ch1800
Great, you are right, that works fine now.
Many thanks for your precious help guys!June 18, 2020 at 3:02 am #1332386David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.