[Resolved] Background Video In Section Not Working

Home Forums Support Background Video In Section Not Working

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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.

    #1493504
    Tom
    Lead Developer
    Lead Developer

    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.

    #1498876
    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!

    #1499117
    Elvin
    Customer Support

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

    #1499845
    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.

    #1500539
    Elvin
    Customer Support

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

    #1501470
    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/

    #1501722
    Tom
    Lead Developer
    Lead Developer

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

    #1501734
    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!

    #1502613
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.