- This topic has 10 replies, 3 voices, and was last updated 3 years, 4 months ago by
Leo.
-
AuthorPosts
-
September 19, 2019 at 7:22 pm #1014096
ClearCity
Hello and thank you for continuously improving GP. I am stuck and have spent hours trying to reduce the huge white gap between the menu and the GP Premium video header on mobile phones and ipads. I’ve researched here and put in css recommended on other threads, messed with the paddings and margins, but cannot get it. Any assistance would be appreciated.
September 19, 2019 at 8:02 pm #1014108Leo
StaffCustomer SupportHi there,
Are you talking about this area?
https://www.screencast.com/t/ZBoc9G5mThat’s actually the content.
Are you not adding any content on that page?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 19, 2019 at 8:36 pm #1014122ClearCity
Yes, I do want to add content to that page. I’m talking about this gap on mobile: http://advdms.com/clients/sunrisedentistry/gap/
Thank you.September 20, 2019 at 1:57 am #1014224David
StaffCustomer SupportHi there,
try unchecking the Full Screen option in the Header Element.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 20, 2019 at 4:58 pm #1014886ClearCity
That worked to get rid of the white gap, but as soon as I unchecked Full Screen the video header did not show up at all on mobile devices. I’m not sure how to reduce some of the white on the top and bottom (I had the content set to vertical top, but changed it to center). Any recommendations?
How do you get a video header to play (or even show up) on Safari?
September 20, 2019 at 5:24 pm #1014897Leo
StaffCustomer SupportThe video should show up without the full screen option.
Make sure you’ve added some padding as it determined the height of the header element:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-heightLet me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 20, 2019 at 5:31 pm #1014903ClearCity
(EDITED) My mistake – it does show on Android with the full screen unchecked and looks very good, but not on an iphone. Is there some special coding to get a video to show up/autoplay on an iphone?
September 21, 2019 at 6:25 am #1015147David
StaffCustomer Supporttry adding the
playsinline
parameter to the<video>
tag and make sure the device isn’t in low power modeDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 21, 2019 at 12:02 pm #1015444ClearCity
I tried several code variations, and this finally worked for me for the video to show on both Android and iphone properly.
In the GP Premium header element (Page Hero tab)
<video autoplay loop muted playsinline class=”background-video”>
<source src=”your-video-link.mp4″ type=”video/mp4″>
</video>Container: Full Width
Inner Container: Full Width
Full Screen – unchecked
Padding for mobile 90 px on top (for this design)(Site Header tab)
Merge with Content
Various offsets for desktop/mobile for this designI appreciate your patience and the recommendations of adding padding, unchecking full screen and adding playsinline. Thank you Leo and David – You guys rock!
For anyone wondering about getting GP Premium – it is worth every penny and then some!
September 21, 2019 at 12:46 pm #1015466ClearCity
Quick question – I’ve used this code on another site – now the video shows on iphone, but that video is not responsive. Is there a CSS code so the video shows at the proper size on mobile devices?
September 21, 2019 at 12:50 pm #1015471Leo
StaffCustomer SupportBackground video and background images aren’t responsive by nature unfortunately.
We set a background image instead of background video for mobile if you’d like?
Let me know π
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.