- This topic has 9 replies, 3 voices, and was last updated 1 year, 8 months ago by
Tom.
-
AuthorPosts
-
October 16, 2020 at 3:00 pm #1492581
William
Hello!
I am experiencing an issue with this particular background video at the top of the page in a section:
https://davidaesthetics.com/I tried using the recommended code from another post in this forum but is resulting in a display totally not desired as it fills the entire browser window. I feel like I’m looking at the wrong post:
https://docs.generatepress.com/article/page-hero-background-video/So, using Chrome Inspector, the looping video works on my desktop. But on my iPhone in Chrome as well, all I see is a static image.
Also on my desktop, although the video plays, I have a horizontal scroll. On my phone, no scroll issue.
Please help steer me in the right direction.
Thank you.
October 17, 2020 at 11:16 am #1493504Tom
Lead DeveloperLead DeveloperHi there,
This should help: https://generatepress.com/forums/topic/video-to-section-background/#post-1235706
Be sure to add the necessary CSS from that article.
Background videos will not auto-play on mobile – this is something mobile devices do on purpose to save bandwidth.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 21, 2020 at 12:35 pm #1498876William
Hello!
Thank you. This solved most of the problem. What about the sections that are below this top hero section? They don’t automatically position themselves below. Meaning section #2 is now behind section #1 with the background video.
Also, am I correct in assuming that I adjust the height % of the video[poster] via media queries in order to manage the cropping points for the different devices/resolutions?
Thanks to you, Tom and your team. Amazing theme and support system!
October 21, 2020 at 6:29 pm #1499117Elvin
StaffCustomer SupportHi,
Thank you. This solved most of the problem. What about the sections that are below this top hero section? They don’t automatically position themselves below. Meaning section #2 is now behind section #1 with the background video.
I’ve checked your site and I don’t see this happening.
Also, am I correct in assuming that I adjust the height % of the video[poster] via media queries in order to manage the cropping points for the different devices/resolutions?
To clarify: Do you really mean cropping? or perhaps you simply want the video to go full-width? Or maybe you want to set the aspect ratio instead of actually cropping the video?
By the way, I’ve checked your CSS and you have a broken syntax here.
#generate-section-1 .generate-sections-inside-container { padding-left: 0px; padding-right; 0px; }
padding-right; 0px;
should be corrected topadding-right: 0px;
. Else, the padding for section 1 will stay broken.A wise man once said:
"Have you cleared your cache?"October 22, 2020 at 7:36 am #1499845William
Apologies! I should have included the URL even if it will be gone later:
https://davidaesthetics.com/test/If you resize the browser window, you will see how the height now remains constant and how the cropping will start to occur as the width of the window is decreased. A little cropping is fine and probably unavoidable.
But my bigger concern are the sections below this top one. Are you able to see how they are behind the video section?
Thank you.
October 22, 2020 at 3:29 pm #1500539Elvin
StaffCustomer SupportOh right yeah I see what you mean now.
You’ll have to correct this code.
.home-test .generate-sections-container { position: relative; overflow: hidden; }
Into this:
.home-test .generate-sections-inside-container { position: relative; overflow: hidden; }
After this, you’ll have to set a fixed height for your video class selector.
But do you intend do add content on top of the background video? if not, you really don’t have to use this CSS as it’s only purpose is to make the video stay relative to the container since we’ve positioned it absolute.
A wise man once said:
"Have you cleared your cache?"October 23, 2020 at 8:38 am #1501470William
Correct. I am not using any content on top of the background video. And, still all subsequent sections are not displaying under the top section with the video. Section #2 is behind section #1. How do we move this down?
October 23, 2020 at 1:16 pm #1501722Tom
Lead DeveloperLead DeveloperIf there’s not going to be any content, you need to give the section some sort of height.
That means adding top and bottom padding instead of removing it completely.
So try giving the Section 100px top and bottom padding.
Then add this:
.home-test .generate-sections-inside-container { position: relative; }
And change this: https://www.screencast.com/t/wgMxRuvD
To
top: 0;
And this: https://www.screencast.com/t/PFjjMpdEDBh
To
100%
.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 23, 2020 at 1:28 pm #1501734William
Excellent! Well, most of it is in the article! I think what got me was the padding if using no content in the section.
Thank you, Tom, incredible support as always!
October 24, 2020 at 9:59 am #1502613Tom
Lead DeveloperLead DeveloperGlad I could help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.