How to avoid black bars in Revolution Slider

Home / WordPress / How to avoid black bars in Revolution Slider

So you have that cool video from YouTube or Vimeo and would like to use it on Revolution Slider? Every once in a while, clients ask me how to remove black bars appearing around their videos. This is also a frequent topic on support forums. Given that Revolution Slider will not resize or crop either YouTube or Vimeo videos (as it would with images for example), black bars will appear if the container size of your slider is different from aspect ratio of the video. In other words, if you’re using Full HD video, but you set the container size to be something other than 16:9 resolution, on smaller screens you will see those black bars. So how to fix (or avoid, which is actually a precise term) this?

revolution slider aspect ratio

Easily – make sure your container size (Layers Grid Size) is set of any of these resolutions.

No black bars, but I want less height?

If you want to reduce the height of the slider, but would still like to avoid black bars, the answer is HTML5 video, for which you can resize container in any way you want. You will need .mp4 video links, though, in order to make this work. Instead of explaining on how this works, let me provide you with a fresh example on how your HTML5 video setting should look like:

HTML 5 revolution slider

Make sure you tick full-screen and force cover settings, while other settings were specific for the project I worked on. Now you’re ready to change Layers Grid Size regardless of the video aspect ratio.