Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 9, 2025 at 4:14 pm #1486520
    Ben

    Hi Team,

    Hope you are well!

    I’m trying to get a full-screen video in a colour section to fill the entire page with a transparent header, but I either have black bars above and below or to the sides of the video. It seems intermittent as to where the black bars go. The video is in the media library.

    What am I doing wrong?

    Many thanks in advance,

    Ben

    July 9, 2025 at 7:21 pm #1486526
    Guenni007

    so your video is inside media library ? and should be placed as html5 video!

    you can force even background-videos inside color-sections to be that way – or video element inside a color-section – but my prefered way is to use codeblock element. – if you do not like that solution- tell me how you like to do it.

    see here example and code to use:
    https://webers-testseite.de/html5-video-embed/
    or
    https://webers-testseite.de/html5-video-bhe/

    July 9, 2025 at 7:43 pm #1486535
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did that answer your question @Ben? If not, then please post a link to where we can see the actual element on your site.

    Best regards,
    Rikard

    July 9, 2025 at 10:04 pm #1486545
    Ben

    Hi, I appreciate @guenni007 reply but sadly I could not understand what he meant.

    I’ve pasted the link below. It’s on desktop screens where the issue is visible.

    Many thanks in advance, you guys are the best!

    July 10, 2025 at 10:50 am #1486588
    Guenni007

    but you have read the instruction:

    this is the content of my code-block element inside a color-section
    custom class on that color-section is: html5-video

    the css code isn’t all needed if you do not want to have an overlay over the video ( other enfold elements )
    this is then sufficient:

    #top .html5-video .responsive-video {
  width: 100%;
  height: auto;
  display: block;
}

.responsive #top #wrap_all .html5-video .container {
  max-width: 100% !important;
  width: 100%;
  padding: 0;
}

#top .html5-video .content {
  padding: 0;
}

    But i will make a color-section solution with background video and the needed css for you now

    July 10, 2025 at 11:03 am #1486589
    Ben

    Hi @guenni007,

    Thanks for your assistance.

    I have added your custom CSS and applied the class .html5-video to the color-section but I still have black bars top and bottom of the video.

    I have also purged the caches.

    Hopefully, you can help me?

    Many thanks in advance,

    Ben

    July 10, 2025 at 11:48 am #1486591
    Guenni007

    and you inserted that video with code-block element as described.
    Please send me the link to your page. ( contact under my avatar )

    ___________

    Solution for color-section and background-video:

    First – you had to know what aspect ratio is your selfhosted video!
    you had to insert this to the color-section when you fill out the elements options:

    in most cases it will be a 16/9 video aspect ratio. – if not you can insert there a different value.

    then have a look to: https://webers-testseite.de/html5-video-ben/

    July 10, 2025 at 5:55 pm #1486610
    Ben

    Ah perfect! That’s fixed it. Thank you so much!

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