Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1476826

    Hi,

    I have a video as a background in a color section with a custom height of 485px and fail to have the content filling the container in mobile/responsive view.

    Please help!

    • This topic was modified 1 month, 2 weeks ago by tebitrongmbh.
    #1476870

    Hey tebitron gmbh,

    Thank you for the inquiry.

    You can add this css code, but the video will only be partially visible — some parts may get cut off or overflow outside the screen.

    @media only screen and (max-width: 767px) {
    
      /* Add your Mobile Styles here */
      #top #av_section_1 .av-section-video-bg video {
        background-size: cover;
      }
    }

    Best regards,
    Ismael

    #1476889

    Thanks Ismael,

    Unfortunately, placing that code under General Styling / Quick CSS didn’t make a difference.

    What am I missing?

    Kind regards.

    #1476932

    Hi,

    This seemed to be working correctly yesterday, but it’s not functioning as expected when we checked it again today. We also forgot to inform you that the background video will not display on mobile view. You will need to apply a fallback image. Did you apply a fallback image?

    Best regards,
    Ismael

    #1476948

    Hi Ismael,

    I left the code in there, added a fall back image and checked the box to hide the video on mobile for now.

    Thanks anyways.

    #1477094

    Hi,

    Looks like the fallback image is displaying correctly on mobile view. Thank you for your patience.

    Best regards,
    Ismael

    #1477467

    Hi Ismael,

    OK, I’ll give it another shot because I believe there has to be a solution. I still have the above mentioned code in my Quick CSS – removing it doesn’t even make a difference. I have a color section for screens above 990px with text on video. Everything below 990px shows the text above the video. That’s fine.

    Isn’t it possible to have the video’s overflow hidden and the color section covered without showing those ugly black bars below and above the video on screens from 990px to about 1800px?

    I’d really appreciate a fix.

    Thanks.

    #1477529

    Hi,

    Have you tried using the Fullscreen Slider? Add a Video Slide, define the video URL, then go to the Styling > Video Settings panel and set the Video Display to the second option (Stretch the video…). This should remove the black bars around the video. You will still need to define a preview image in the Content > Fallback Image panel.

    Best regards,
    Ismael

    #1477544

    Hi Ismael,

    thanks, I’ve tried that on a separate test page [private content] using the settings you’ve mentioned. The source video isn’t 16:9 though but I’ve selected stretch regardless which only results in the fall back image being stretched. Isn’t there a way to define the height of the slider? – can’t find that. On top of that I’ll need to place the text plus box on top of the slider as in shown my color section.

    Kind regards.

    #1477740

    Hi,

    Thank you for the update.

    The video should cover the entire slider when this option (Stretch the video…) is enabled. Please try this css code:

    #top .av-element-cover video {
        object-fit: cover;
    }

    This should result to: https://imgur.com/2Kl21jz

    We tried logging in to the site but the account above is no longer valid.

    Best regards,
    Ismael

    #1477866

    Hi Ismael,

    I’m lost as to where I can even find the option to stretch the video in the color section.

    I added the CSS and updated your user account.

    What am I missing?

    Kind regards.

    #1477972

    Hi,

    Thank you for the info.

    As suggest above, you have to use the Fullscreen slider in order to stretch the video. We edited the video slide in the test page and switch the Stil > Video Einstellungen > Anzeige des Videos settings to the second option. Please check the link in the private field.

    Best regards,
    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.