[Resolved] removing black bars in video

Home Forums Support removing black bars in video

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #311650
    Norman

    Hi Tom,

    Do you think it’s possible to remove the black bars which show in my video? I use Elementor, so maybe I should ask them, but I’m not sure. Maybe you can help me.

    I use a custom aspect ratio. The video is uploaded on Vimeo (without black bars), but Elementor forces it to 16:9, adding black bars to the top and bottom.

    I think some kind of css should do the job?

    This is the link: http://www.fairfieldcollege.nl/nieuwesite

    Thanks!

    GP Premium 1.2.96
    #311685
    Leo
    Staff
    Customer Support

    Hi Norman,

    I don’t see a CSS solution here as the black bar is not margin/padding etc.

    It might be best if you check with Elementor on this one.

    Let me know if this helps.

    #311687
    Norman

    Hi Leo,
    thanks for answering. I managed to move the video up by screwing around in the inspector. If I add ‘margin-top: xxx%;’ the video moves up or down. The upper black bar will then be covered by the video, and I might be able to cover the lower black bar with a section + negative margin. Makes sense?

    Only problem is I can’t write the correct css..

    This is where I screwed around in the inspector:

    #player, .fallback, body, html, iframe

    width: 100%;
    height: 100%;
    margin: 0;
    margin-top: -3.06%;
    padding: 0;
    background-color: #000;
    overflow: hidden;

    #311690
    Leo
    Staff
    Customer Support

    I really wouldn’t recommend fixing this with CSS (negative margin etc..) as it will likely cause some responsive issues.

    Have you checked with Elementor? I would assume they have better ways to fix this or an alternative way to insert the video.

    #311691
    Norman

    Okay, will do. Thanks!

    #311736
    wekhter

    Hi Norman, I’m just another GP user passing by but I have a solution for you 🙂

    The reason the black bars are showing is because your video is an aspect ratio other than 16:9, but you’ve set the ratio to 16:9 in Elementor when you embedded it. For responsive 16:9 embeds the bottom padding is set to 56.25%, but your video needs a smaller percentage.

    If you will only be using videos this aspect ratio or you have a way to apply on a per-page basis, you can use the following:

    .elementor-aspect-ratio-169 .elementor-video-wrapper {
        padding-bottom: 38%;
    }

    If you will be using other videos with 16:9 aspect ratios and your CSS is loaded sitewide, you should do this instead:

    .page-id-51 .elementor-aspect-ratio-169 .elementor-video-wrapper {
        padding-bottom: 38%;
    }

    Hope that helps!

    #311742
    Norman

    holy cow, it worked!
    I’ve been busy with it all day, thanks a lot 🙂

    #311783
    Leo
    Staff
    Customer Support
    #311900
    Norman

    @wekhter

    So I used this piece of css:
    .page-id-51 .elementor-aspect-ratio-169 .elementor-video-wrapper {
    padding-bottom: 38%;
    }

    However, I’d like to switch the video from a Vimeo video to a Youtube video, because I don’t want the controls to show. If I change the settings from Video to YT, the css doesn’t seem to work anymore.

    Also, I added the Youtube video below the Vimeo video, but I’m not sure what the css should be to make the height the same as the upper one. I probably only need to change the page id?

    Thanks!

    #311981
    Tom
    Lead Developer
    Lead Developer
    #312031
    wekhter

    @Norman I don’t see the YouTube video at your link so I can’t know for sure what’s going on, but I can explain how the CSS works and maybe that will help?

    From what I can see (I have never used Elementor, just glanced through their docs), when you place a video element it lets you choose whether the video is 4:3 or 16:9 aspect ratio and applies a css class for which one you choose. In your case, you have the video set to 16:9 so you’re looking at .elementor-aspect-ratio-169

    16:9 = 9/16 = 56.25%, so Elementor automatically applies .elementor-aspect-ratio-169 .elementor-video-wrapper {padding bottom: 56.25%;} (In the doc Tom linked above, that is why the padding line is commented 16:9)

    Your video’s aspect ratio comes out to 38%. (If it was a 4:3 video, it would be 4:3 = 3/4 = 75%)

    If your YouTube video was added the same way as the Vimeo video, then I’d check to make sure that you also set it to 16:9 because the CSS I gave is only targeting videos set to 16:9.

    If the YouTube video is on a different page, then you’d alter .page-id-51 to the new page id.

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