x

Remove black bars above and below uploaded videos

Weebly automatically adds letterboxing (black bars above and below video) to all videos uploaded onto a site.

I would love to be able to remove these bars.

(Alterantively, an explanation of how to remove using the html / css would also be greatly appreciated!)

5,257 Views
Message 1 of 16
Report
15 REPLIES 15

Hello @christina-bull !

This issue is happening due to the aspect ratio of your video. For example, if you had an old movie that you wanted to play on your widescreen HD television. Such as an original copy of Gone with the Wind on VHS. More than likely you are going to see black bars on each side of the screen. Before the invention of the HD televisions that we have now, they were all in the 4:3 aspect ratio. Of course, Warner Bros. has since recreated the movie in HD so that it will fit our 16.9 HD screens. Our video player is the same way. Depending on how you recorded your video or what you recorded is on does make a difference in the outcome. The video element does have multiple options to allow you to set the aspect ratio of your video. To access this screen click the video and select the size button. Try switching between each of the options to see if any of them help eliminate some or all of the black bars. If none of the settings work, then your next step is to edit the video to either crop the black bars. You can use programs such as Windows movie make or iMovie for a Mac to crop the black bars from the videos.  

image

The following third party tutorial will explain in further detail just how the aspect ratio affects your videos. It will also provide you with some options on how to fix the problem.

http://wistia.com/blog/remove-black-bars-from-online-video

5,256 Views
Message 2 of 16
Report

Hi @Robin,

Thank you for your reply.

The videos I'm trying to post are already in a 16:9 aspect ratio (1920 x 1080), and do not have any black bars on the file itself. The bars only appear on the video after uploading, and remain regardless of what size ("auto", sextra large, large, ect) it's set at via the menu you described.

Any further guidance you could provide would be greatly appreciated. 

5,252 Views
Message 3 of 16
Report

I took a look at your website and see your issue. Can you please submit a ticket using the following link?

https://hc.weebly.com/hc/en-us/requests/new

Reply back to me here with your ticket number.
Thank you!
5,248 Views
Message 4 of 16
Report

Hi @Robin,

Thanks for your continued assitance.

My ticket number is 3419451.

5,237 Views
Message 5 of 16
Report
Square

Thanks for submitting a ticket - you should hear back soon.

5,234 Views
Message 6 of 16
Report

We are experiencing precisely the same thing when using Weebly's "Embed YouTube" app. 
Despite our videos being 16:9 1080p, they always have rather ugly black bars "added" to the top and bottom of each video. 

We have also tried every permutation of 'responsive' embed code to get our videos to embed on the page in html. 
That works only on desktop views only though - nomatter what css coding we add to the page itself. 

None of the Weebly helps seem to address this issue so far. 

Looking forward to a solution. 

5,045 Views
Message 7 of 16
Report

Hi, It's October 2017, I'm new to Weebly, and it looks like the black bar problem has not been fixed. My videos are 16:9 and they bars look bad. About to throw in the towel and head to Wix. Thoughts?

4,595 Views
Message 16 of 16
Report

I'm having the same issue.  You can see the lines on top and bottom of embedded video here:  http://prntscr.com/iqr4iv

Do you have a fix for this?

Thank you,

R

4,392 Views
Message 16 of 16
Report

m having this issue too!

Being told that there is nothing I can do and it cannot be fixed! 

UNLESS YOU UPGRADE!!!

How about I move over to another website builder - future upgrade money can go to them instead?

4,349 Views
Message 16 of 16
Report
Square

Sorry @rfloor, but I don't believe we saw your message. Can you post the full url to the page you are seeing this on? Same to you, @SFATEXAS.. if you could please post a link to the page where you are seeing this, that'd be great. Thank you both!

3,182 Views
Message 16 of 16
Report

3,180 Views
Message 16 of 16
Report
Square

Have you tried any of the other size options with the element, @SFATEXAS? It's set to HD right now, but I wonder if it wouldn't have the bars using auto.

3,175 Views
Message 16 of 16
Report

Yes

I've tried every size and they all do it Smiley Sad

3,169 Views
Message 16 of 16
Report
Square

Hi @SFATEXAS Sorry for the inconvenience, but in order to remove those lines you would need to use the Embed Element to add in html code provided by Youtube directly. If you go to the video on YouTube and click on the Share option you will see a link that says Embed. Copy the code and then paste this into our Embed Element. On the plus side, you get to choose when to start the video and can also disable the suggested videos that play when you video stops. The default size of the iframe is 560x315 so you may need to play around with these numbers till you get the video to the size you want. I've embedded the code directly under your video in your editor so you can see what I'm talking about. Just make sure to publish once you are happy with your changes. Smiley Happy

3,166 Views
Message 16 of 16
Report

Sorry I too have this issue and the aspect ratios are correct.

3,151 Views
Message 17 of 16
Report