Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1486520

    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

    #1486526

    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/

    #1486535

    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

    #1486545

    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!

    #1486588

    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

    #1486589

    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

    #1486591

    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/

    #1486610

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

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