- This topic has 10 replies, 3 voices, and was last updated 3 years, 4 months ago by Leo.
September 19, 2019 at 7:22 pm #1014096ClearCity
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 #1014108LeoStaffCustomer SupportSeptember 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 #1014224DavidStaffCustomer SupportSeptember 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 #1014897LeoStaffCustomer Support
The 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:
Let me know 🙂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 #1015147DavidStaffCustomer SupportSeptember 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″>
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 design
I 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 #1015471LeoStaffCustomer Support
- You must be logged in to reply to this topic.