Responsive video in header

  • Resolved mickpascal

    (@mickpascal)


    1 year ago

    [redacted link to wordpress.com]

    Hi there

    When I upload video from media library right under the header on my website, the video looks perfect on a computer, but when I go to the webshop on my mobile, the video image is zoomed in a lot so it doesn’t look as nice as on a computer.
    I have also tried using the url to see if that solves the problem, but the video image is still zoomed in too much. I have tried making the video responsive via codes in css, but that doesn’t help!? I use kubio editer.

    The code i use is:

    /* Responsiv video container / .responsive-video { position: relative; padding-bottom: 56.25%; / 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    }

    .responsive-video iframe,
    .responsive-video object,
    .responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    Can anyone help with a solution to this problem?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year ago

    You can achieve a non-zoomed size by specifying with CSS that the video container fit instead of cover. But doing so would leave a large amount of whitespace taken up by the overall slider container. The slider’s overall height is determined dynamically and assigned as a element style attribute. Such styling is very difficult to override with CSS. This slider is apparently part of your WoxStore theme, a commercial theme. We’re unable to provide support for commercial themes in these forums. I recommend you seek assistance through the theme’s dedicated support channel.

    Kamrul Hasan

    (@kamrulwp)

    1 year ago

    Hi @mickpascal,

    The mobile zoom issue you’re experiencing is likely due to how the video is being embedded and how Kubio handles responsive layouts, rather than a general CSS issue. Here’s a breakdown and solutions:

    Try these quick fixes:

    • Kubio Settings: Check for mobile-specific video settings within Kubio. Ensure the video’s container is 100% width on mobile.
    • CSS: add object-fit: contain; to your video/iframe CSS.
    • Inspect Element: Use browser developer tools to check for conflicting CSS.

    Let me know if that helps.

    Thanks,

    Kamrul Hasan

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive video in header’ is closed to new replies.