[Resolved] Background Video In Section Not Working

[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.

[Tom]

Hi 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-development

[William]

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!

[Elvin]

Hi,

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 to padding-right: 0px;. Else, the padding for section 1 will stay broken.

A wise man once said:
"Have you cleared your cache?"

[William]

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.

[Elvin]

Oh 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?"

[William]

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?

https://davidaesthetics.com/test/

[Tom]

If 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-development

[William]

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!

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts