Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 10, 2025 at 3:38 pm #1476826
    tebitrongmbh

    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 week, 4 days ago by tebitrongmbh.
    February 11, 2025 at 4:56 am #1476870
    Ismael

    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

    February 11, 2025 at 9:34 am #1476889
    tebitrongmbh

    Thanks Ismael,

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

    What am I missing?

    Kind regards.

    February 12, 2025 at 7:50 am #1476932
    Ismael

    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

    February 12, 2025 at 11:39 am #1476948
    tebitrongmbh

    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.

    February 14, 2025 at 6:09 am #1477094
    Ismael

    Hi,

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

    Best regards,
    Ismael

    February 20, 2025 at 11:06 am #1477467
    tebitrongmbh

    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.

    February 21, 2025 at 5:26 am #1477529
    Ismael

    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

    February 21, 2025 at 10:30 am #1477544
    tebitrongmbh

    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.

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