Page 1
Page 1
Started By
Message

Video for website - question regarding Aspect Ratio

Posted on 11/10/19 at 6:05 pm
Posted by Tridentds
Sugar Land
Member since Aug 2011
20331 posts
Posted on 11/10/19 at 6:05 pm
I have Vimeo pro for hosting videos and animations on my company website.

Changing things around a bit and I have 2 40 second video animations that I used Clideo to crop so I could center a specific object in each animation. I then used Real Player to trim the videos to about 10-12 seconds each. I then uploaded the videos to Vimeo and they are tall and narrow as intended and look correct. I set them to loop.

Now the problem. I uploaded the videos to the website (Wix) and I have black bars on each side of the video when I shrink the video down. Is there a simple way to change the aspect ratio? If it involves source code I won't mess with this.

Thanks.


Posted by tigerpawl
Can't get there from here.
Member since Dec 2003
22229 posts
Posted on 11/10/19 at 8:22 pm to
Questions:

What are the actual properties of the 2x40 second source videos? [right-click on the file > properties > "details"] Height and width (in pixels)??

When you cropped in Clideo, did you select "maintain aspect ratio" during the crop??

Videos uploaded to 'Wix Video' only display in a 16:9 ratio, so any other aspect ratios automatically get added letterboxes, even when the uploaded file is a different size.

I think somewhere along the line, you stretched the source videos and didn't maintain the aspect ratio (assuming your source files were 16:9 in the first place).

Just a hunch, but I think this task is the culprit: "...I used Clideo to crop so I could center a specific object in each animation."
This post was edited on 11/10/19 at 9:39 pm
Posted by PJinAtl
Atlanta
Member since Nov 2007
12740 posts
Posted on 11/11/19 at 1:26 pm to
Building off of what tigerpaul said, are the videos able to be the same dimensions on the website as they are on the Vimeo page? If not, then the letterboxing can be being added to keep the aspect ratio correct.

This could be especially true if the site is built with responsive design so that it adjusts to be mobile friendly on tablets and phones.

I know on a couple of sites I manage, when we have embedded YouTube videos, I have had to do some style tweaking to keep the videos from getting letterboxed to maintain aspect ratio. Basically what you do is create a div that is always the correct aspect ratio (for 16:9 you want height to be 56.25% of the width if I remember right). You then style the video so that it takes up 100% of that containing div.

Basically the div resizes with the screen to maintain the aspect ratio, and then the video is allowed to fill that space completely, and you should, in theory, get a video that is always the correct aspect ratio without letterboxing.

I know you said the videos you are doing are tall and narrow, so you would need to figure out the aspect ratio there and set the div in that correct size - basically that the width of the div would always be some percentage (65%, 75%, whatever) of the height.
Posted by Tridentds
Sugar Land
Member since Aug 2011
20331 posts
Posted on 11/13/19 at 9:00 pm to
You nailed it. I did not select “maintain aspect ratio”. This was the problem.
Posted by Tridentds
Sugar Land
Member since Aug 2011
20331 posts
Posted on 11/13/19 at 9:02 pm to
Good info. I appreciate the input. Thank you.

first pageprev pagePage 1 of 1Next pagelast page
refresh

Back to top
logoFollow TigerDroppings for LSU Football News
Follow us on Twitter, Facebook and Instagram to get the latest updates on LSU Football and Recruiting.

FacebookTwitterInstagram