Section Video BG; Does not fill container = Black Bars

Support
#1

I am placing a video background into a section - it works great, plays great, however it does not fill/cover the screen. I have looked through the forum with no luck on a fix or way to edit the element in CSS.

I can falsely fill the screen width with parallax - increasing the percentage of parallax, but then it creates black bars along the top and bottom. Especially when resizing for laptop screen size, tablet, etc.

Can I set this bg video element to fill its container and be responsive to its resizing?

#2

Hello Kris,

Thanks for writing in! Usually, black bars appears when you are not using the direct video URL in the background video source. With background videos, you are supposed to use direct video file and not embed codes from Youtube or Vimeo. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#3

After toying around, I discovered a method that seems to work well. This method directly calls the MP4 file and forces it to fill the window - though there isn’t a simple way to adjust its alignment or fill, I’m happy with the result. I’m not certain that it won’t generate any issues down the road, but for now, it is working famously. Here is the process for anyone interested:

  1. Upload video to Google Drive account.

  2. Create shareable link of video: options > share > get shareable link “copy link” (Important: ensure that “Anyone with the link can view” is selected in the dropdown menu before copying link).

  3. Use shareable link to get a direct link to the video - I used this site: https://www.wonderplugin.com/online-tools/google-drive-direct-link-generator/

  4. Take Google Drive Direct Link and paste into Section Background Layer “Video Source”.

I used mine on the lower layer with parallax and it works beautifully.

If this method causes any viewable issues for anyone reading this please let me know!

#4

Hello Kris,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#5

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