Eliminate black bars from video in a Revolution Slider

Support
#1

Hello All,

Thanks for your support!

How do I remove the black bars from a 16:9 video on a page in a Standard Revolution Slider with slide type Auto? I’ve tried all of the permutations I could think of and the bars persist. The dev site at BlakeAfterProm.com uses some 16:9 images on the homepage and they’re perfectly responsive with no bars, so there must be something I have missed building the slider.

I can’t use the video as a slider background because I have to have a different video for mobile-only on another layer.
Forcing Cover eliminates the bars, but of course I lose the sides of the video as you would expect.
This HTML5 video is 1280x720, but I’ve also tried 1920x1080, as well as YouTube-hosted and the result is the same black bars top and bottom.

Thanks for your direction.

#2

Hey,

I have checked your site and I could not find any black bar. Can you tell me how to reproduce this problem?

#3

Hi John,

The bars are in the screenshot from the original question. The 16:9 video is the window above the nav bar. It shows says Blake AfterProm on the multicolored background. The black bars above and below are put there by Revolution. 16:9 images below the nav bar don’t have black bars - just the video.

#4

I just switched from self-hosted to YouTube video because of streaming speed, but those black bars above and below the Blage AfterProm multicolored video frame are still there.

#5

Hi There,

Use the video as background instead of a video layer.

Let us know how it goes.

#6

No good with the video as the background.

The slider still shows black above and below the 16:9 1280x720 video. You can look at BlakeAfterProm.com now and see the Revolution slider above the nav bar and a Cornerstone Embed Video element below it. The Cornerstone videoframe respects the 16:9 aspect ratio of the video. I found some code online to make the Embed Video (not Video Player) element respect the 16:9 aspect ratio and then put in negative margins to remove the top and bottom space.

I’d still like to use the Revolution slider, but the only way I can make the full width of the 16:9 video visible is to set aspect ratio to 4:3, which gives black above and below the video frame. Setting aspect ratio in Revolution to 16:9 causes the sides of the video to be cropped off. The Force Cover switch has no effect.

The problem is definitely within Revolution because the YouTube video shows perfectly at 16:9 outside of the slider.

#7

Hi there,

You can’t really fit two shapes with two different aspect ratio, it’s either change your video’s aspect ratio to match the slider, or change your slider’s grid size to match the video’s aspect ratio.

Your slider is square and you’re trying to fit a rectangle, and that’s the main reason :slight_smile:. And no matter what workaround, it will not work I think it’s easier to change slider grid size than changing the video’s aspect ratio.

Thanks!

#8

That’s what I want - a 16:9 slider; just like the 16:9 video. I described above how the slider WILL NOT HONOR the 16:9 aspect ratio. The slider stays 4:3 and cuts the sides off of the video.

How do I get the slider to remain 16:9?

#9

Hi there,

As a previous recommendation, please change your grid size to match 16:9 aspect ratio. Then make sure your slider is not configured for full-screen. Fullscreen will ignore the aspect ratio. You can try this grid size 1024x576, that size is 16:9

Thanks!

#10

Thanks. I had been expecting the source media setting to force 16:9. 1024x576 wouldn’t make the slider responsive, so I tried 1280x720, the video’s native resolution, and it works fine.

I admit that grid sizes are a bit confusing to me. Where is a good tutorial on setting it up? I thought it just controlled when slides for the next smaller device were used, but it seems to control more than that.

I appreciate your help.

#11

You’re always welcome!

The following guide might help regarding grid sizes and layer responsivess:
https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/