Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 31, 2026 at 4:24 pm #1496470
    Munford

    HI
    a couple video questions:
    1. I have a new video in a fullscreen slider on the page below. I am seeing gray bands at top and bottom – I think it has a different aspect ratio that 16:9, but I can’t get it to display correctly (have tried all the settings on the video aspect ratio and video size). I see I can change the size of the slider but then the video gets cropped (I have it on original size).
    Can you help me with this? The video on the front page looks fin (it’s a different aspect ratio).

    2. That same video is in a layer slider with a background video that I am setting for mobile. The front page has the same setup, and that video loads on mobile (on safari at least) but the new festival-2026 mobile video is not loading. Can you see what the issue might be? they are set up the same, and the new video is smaller in size so should load faster.

    • This topic was modified 3 weeks ago by Munford.
    April 1, 2026 at 7:18 am #1496493
    Ismael

    Hey Munford,

    Thank you for the inquiry.

    For the gray bands issue, this is happening because the mp4 and webm versions of your video have different dimensions and aspect ratios. The slider is picking up on the size difference and displaying gray bars to fill the gap.

    To fix this, you have two options:

    1. Resize the mp4 video to match the exact dimensions of the webm version before uploading it.
    2. Simply use the same webm video from your front page on the festival-2026 page, since they are the same video.

    Option 2 is the quickest fix if both pages are using the same content.

    Regarding the mobile video not loading on the layer slider, this is likely related to the same issue. Once the mp4 and webm versions are consistent in size and format, the mobile video should load correctly as well.

    Let us know if the issue persists.

    Best regards,
    Ismael

    April 1, 2026 at 8:39 am #1496496
    Munford

    sorry can you check it on this staging site instead?
    I think the other page I sent is using the wrong vdeo.
    I am using an mp4 here andhave the webm version uploaded as well, in the same format, but I still see the gray bands. How can I make it fit?
    thanks

    • This reply was modified 2 weeks, 6 days ago by Munford.
    April 2, 2026 at 6:12 am #1496519
    Ismael

    Hi,

    Thank you for the update.

    Adding this css code should help get rid of the gris bar, but it will distort the image a bit. Based on our checks, the distortion is not really visible. Please make sure to purge the cache before checking.

    #top .av-video-slide iframe, #top .av-video-slide embed, #top .av-video-slide object, #top .av-video-slide video {
    object-fit: fill;
}

    Best regards,
    Ismael

    April 2, 2026 at 9:05 am #1496528
    Munford

    sorry what css code?

    April 3, 2026 at 6:19 am #1496541
    Ismael

    Hi,

    Sorry about that — we forgot to post the css code. Please try this modification: 

    #top .av-video-slide iframe, #top .av-video-slide embed, #top .av-video-slide object, #top .av-video-slide video {
    object-fit: fill;
}

    Best regards,
    Ismael

    April 6, 2026 at 11:56 am #1496632
    Munford

    HI
    – that got rid of the gray bands, but stretches the image/text when the window is resized.
    Not sure it’s an issue – I guess that’s the only way to get it to fill the container since it’s not in the correct ratio.
    Maybe it’s better to get the video in 16:9 format?
    thanks
    Nancy

    • This reply was modified 2 weeks, 1 day ago by Munford.
    • This reply was modified 2 weeks, 1 day ago by Munford.
    • This reply was modified 2 weeks, 1 day ago by Munford.
    • This reply was modified 2 weeks, 1 day ago by Munford.
    April 7, 2026 at 7:14 am #1496654
    Ismael

    Hi,

    Yes, that’s to be expected as we mentioned above. The code will stretch the video so it fills the container. It is usually recommended to have videos in a 16:9 ratio since most screens have the same aspect ratio.

    Best regards,
    Ismael

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