[Resolved] removing black bars in video

[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!

[Leo]

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.

[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;

[Leo]

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.

[Norman]

Okay, will do. Thanks!

[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!

[Norman]

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

[Leo]

@wekhter Thanks for helping out 🙂

[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!

[Tom]

These instructions should work for any video: https://docs.generatepress.com/article/responsive-videos/

[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.

[Author]

Posts