Video background shows black bars

Support
#1

Hi there!

I have a youtube video as a hero background in one of my rows. I have it set to be the full width and length of the screen using, height: 100vh; in the inline css field for that row. It works beautifully on a desktop screen.

The problem is when the screen size goes below 1200px+ the video shows a black bar above and below. The video is a widescreen format, and does not show this black bar when it’s playing in YouTube.

I’m wondering if there is a way to get the row to either collapse in more to cut off the black areas or to make the video enlarge so it fills the space? Or if you have any other ideas on how to make this work, I’d love to hear them.

Thanks!

Summary

testing this out

#2

Hi There,

Thank you for writing in, but I don’t see the black bar above and below the video, please clarify how we can replicate the issue.

You added the Youtube video as a background, right? Please make sure that its aspect ratio is set to 16:9



Cheers!

#3

Hi!

I ended up using a revolution slider instead and that took care of the issue. Originally, I had set the background of the section as a video and that’s where I was getting the black bars when the page was less than 1200px wide. The video itself is in the correct 16:9 aspect ratio as far as I know. It would be a great time-saver to be able to figure out how to just set the background and have it adjust properly without having to use Slider Revolution. If you want to recreate the issue to see what I was seeing, just pop a video into the background of a section, set it to full screen, and see if it creates a black border as it sizes down from 1200px.

Thanks for your help!

How can I get my vimeo background video to scale to full width of the container?
#4

Hello There,

Thanks for updating in! Please be advised that when using video background in a section, you can only use a direct video file source. You cannot use Youtube or Vimeo video. When you do, it will create issues like the black bar that you are having. It should be noted that the section video background needs a direct video url like http://example.com/video.mp4 and only *.mp4, *.ogv or *.webm video file format must be used for cross browser compatibility. If you video is hosted in Youtube or Vimeo, please do not use the section to add the video as a background. Use the Revolution Slider instead.

Hope this helps.

Keep aspect ratio grid cell
#5

Aha! Good to know! That explains it :grin:

Do you have any recommendations on where to host videos so that a direct source would be available? I’ve been using YouTube and Vimeo when needed.

Thanks again!

#6

Hi again,

You should host the video on your server so the direct source would be available. It’s also called Self-Hosting. You can check out the following article to learn more about self-hosting https://www.videobrewery.com/blog/beginners-guide-to-video-hosting/

Cheers!

#7

Great, thank you!

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.