Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts

    Unhappy Update to a 2014-03-21, 12:29 thread re. aspect ratio (couldn't find a thread #)

    An Update, about a year later. I neglected to post back with my success last year - sorry to Clint, FUN downtown and dg1261. Thread here: http://windowssecrets.com/forums/sho...t=aspect+ratio

    I did finally get the videos to fit into their "boxes" on the site page. They look a trifle stretch top to bottom, but I was okay with the result (www.mygoforthegreen.com/pro-shop).

    Wanted to add audio to them and managed to do so via Windows Movie Maker, and file converters to get wmv to flv for WordPress.

    BUT I totally forgot how I'd corrected the aspect ratio so the first sound video has black bars on the top and bottom again.

    I'm back there re-reading everyone's posts to try and remember what I did. Certainly just switching formats within Movie Maker didn't help when I converted and posted on the site.

    If any earlier helper has any new ideas, great. Otherwise, I'll work away and experiment again and let you know how it goes or if I get stuck. This time, I'm making detailed notes as I go!

    Linda
    Last edited by IreneLinda; 2015-02-25 at 16:53. Reason: Added link to original thread

  2. #2
    New Lounger
    Join Date
    Mar 2015
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

  3. #3
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts
    Hmm. I guess your icon means my post makes no sense. Sorry about that. I've gotten myself so confused about the whole thing it's no wonder I'm not making sense!

    Basically, after hours of vain attempts, I can't get the new "with audio" videos to "fit" properly into their frames on our site.

    I managed to get them to fit (pre adding audio) by doing something with "aspect ratio", but can't seem to re-create the steps. I've gone back through the former thread (link in my first post here) several times, but nothing suggested there is working.

    Guess I'm hoping someone can help me get the videos sized correctly. The "wrong" version can be seen in the left column of http://mygoforthegreen.com/pro-shop. There are black bars above and below image and the frame has stretched top to bottom, not matching the other two as it did before. When I tried to convert the second column one, it was even worse (very wide bands above and below).

    As an added frustration, when I increase the size of the page with CTRL +, the images all get black bars on right and bottom. AGH.

    Does this make the issue clearer? I appreciate you letting me know my post was confusing! Any ideas gratefully accepted.

    Linda

  4. #4
    3 Star Lounger
    Join Date
    Dec 2009
    Location
    Northern California
    Posts
    327
    Thanks
    15
    Thanked 142 Times in 91 Posts
    From your post #1 above:
    Quote Originally Posted by IreneLinda View Post
    I did finally get the videos to fit into their "boxes" on the site page. They look a trifle stretch top to bottom, but I was okay with the result
    From your post #16 in last year's thread:
    Quote Originally Posted by IreneLinda View Post
    Good news - got the videos resized so they fit and the bars are gone. Here's what I did using all your suggestions (and lots of experimentation!):
    • re-downloaded from stock site in WMV format
    • opened in Movie Maker
    • used Project tab to check ratio: all were wide screen
    • saved each one as MP4 movie using "recommended settings"
    • changed sizes to 250W x 180H (frame sizes) using online converter
    • converted resized images to FLV
    • uploaded to WordPress site using Add Media
    I have no experience with WordPress so don't know what you have control over, but can offer some observations that will help you zero in on the problem.

    From the above we know the three videos are supposed to be "wide-screen", though you didn't specify exactly which wide-screen format that would be. It appears, though, that they are probably supposed to be 15:9 aspect ratio. Given the videos are all 250 pixels wide, that means when all is said and done the flv files to be uploaded should have been 250x150. Yet last year one of your steps was to change the size to 250x180. That would account for the vertically stretched appearance of the videos.

    I examined videos 2 and 3 using the "Inspect element" function in Google Chrome. For instance, open your webpage in Google Chrome, right-click video 2 and select "Inspect element". This opens a sidebar which lets you examine the actual code WordPress generated for your webpage. Among all the gobbledegook this reveals the following characteristics for video 2:
    "div.mejs-overlay.mejs-layer.mejs-overlay-play 250px x 150px", and
    "div#me_flash_1_container.me-plugin 250px x 180px"

    IOW, the original video was 250x150 and was stretched to 250x180. That fits with what you stated happened last year, and explains the vertically stretched appearance. There were no black bars in the x150 original, hence no black bars when it was stretched to 180, and the nested <divs> on the webpage around video 2 are all consistent with a video size of 250x180, so thus WordPress didn't add any black bars of its own, either.

    For video 1, the same characteristics are:
    "div.mejs-overlay.mejs-layer.mejs-overlay-play 250px x 170px", and
    "div#me_flash_0_container.me-plugin 250px x 200px"

    Similar to video 2, you can take this to mean a 250x170 original got stretched to 250x200. The nested <divs> are consistent with a video size of 250x200 (you'll notice on the webpage it's obviously taller than videos 2 or 3) which means WordPress isn't adding any black bars, but note the "pre-stretched" video in this case is 170 tall instead of 150.

    That's where the black bars are coming from. Your conversion technique turned the downloaded 250x150 video into a 250x170 video by adding 10-pixel black bars above and below, then that 250x170 video was stretched to 250x200 before uploading to your website.

    If you want to prove to yourself that the black bars are in the flv you uploaded, try this. Cut and paste the following code into a text file:
    Code:
    <a href="http://mygoforthegreen.com/wp-content/uploads/2011/09/Coaching2.flv">Coaching2</a><br>
    <a href="http://mygoforthegreen.com/wp-content/uploads/2011/09/Team-Building.flv">Team-Building</a><br>
    <a href="http://mygoforthegreen.com/wp-content/uploads/2011/09/Meetings.flv">Meetings</a><br>
    Rename the text file to "test.html", then double-click the file to open it in your web browser. For each of the three links, right-click and choose to download or save each video. This will download the exact, three flv files that were uploaded to your site. Play each one in a local media player that can handle flv files (I use VLC Media Player), and you'll see the difference. The "Coaching2" video has black bars embedded above and below the video content.

    So, the solution is to go back to the original wmv file and start over. Reedit it to add your audio, convert it, and re-upload it. And if you're going to go through that trouble, you might as well redo all three and see if you can fix the stretching this time.

  5. The Following 2 Users Say Thank You to dg1261 For This Useful Post:

    IreneLinda (2015-03-10),Rick Corbett (2015-03-11)

  6. #5
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts
    I am sitting at the computer, completely stunned - positively! - by your response, dg1261. Thank you so much for ALL the time you took on this for me (and hopefully other Loungers who have a similar issue). You have given me so much to work with, I'm beyond grateful.

    Going through your step-by-step process is the first thing on my list tomorrow morning - when my brain is clearer.

    I will post back with results. It's feels great to have a specific series of steps to follow to get this right. Again, many thanks.

    Linda

  7. #6
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts

    Progress Update

    Back with report...

    Wide screen in Movie Maker Project tab does mean 16:9, as you suggested.

    Here's where I am so far:
    - saved original file in Movie Maker as wmv, 250 x 150
    - converted to mov and then flv, making no changes to size
    - tried it on page with result in attachment.

    ADDED: <div style="width: 100%; height: 120px;" class="mejs-overlay mejs-layer mejs-overlay-play"><div style="margin-top: -35px;" class="mejs-overlay-button"></div></div>
    I found this in Inspect Element. For some reason, height is 120 not 150. Wouldn't that explain the bars? AND where did that pixel height come from?

    I don't mind the box resizing smaller since all 3 will do so once I've edited them, but the narrow black bars are still there. They seemed to be there in the converters as well, but I hoped they wouldn't be in the final version. Foolish, I realize.

    I saved the movie in Movie Maker as a custom size, 250 x 150, as recommended was 426 x 240.

    Obviously, I messed up somewhere. Any thoughts on where?

    Oh, I performer your "test" with the code and you were exactly right again (not that I doubted you after your clear explanation!!).

    Linda
    Attached Images Attached Images
    Last edited by IreneLinda; 2015-03-11 at 14:06. Reason: Added Inspect Element findings/code

  8. #7
    Super Moderator Rick Corbett's Avatar
    Join Date
    Dec 2009
    Location
    South Glos., UK
    Posts
    2,143
    Thanks
    101
    Thanked 580 Times in 464 Posts
    dg1261 - Very nice explanation/talk through in post #4!

  9. #8
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts

    Progress Report #2

    Okay, with more experimenting, re-downloaded original file as mov from stock photo site; opened in Movie Maker; saved with recommended settings; converted to flv and uploaded to page with result in attachment - no bars!

    Think the new size, although less in height, is fine as the frame seemed to adjust on its own.

    What do you think? Is this workable? If so, will try the other 2 next, but don't want to proceed if I'm missing something!!

    Thanks again,

    Linda
    Attached Images Attached Images

  10. #9
    3 Star Lounger
    Join Date
    Dec 2009
    Location
    Northern California
    Posts
    327
    Thanks
    15
    Thanked 142 Times in 91 Posts
    First, let me say I have little experience in video editing, so I'm not sure I can really help you with that part. But by at least identifying where the problem is, perhaps other loungers more experienced in video-editing can help.


    Quote Originally Posted by IreneLinda View Post
    Wide screen in Movie Maker Project tab does mean 16:9, as you suggested.
    Just to be clear, you're aware I was saying 15:9, right? There are a variety of "wide-screen" aspect ratios, and you'll find both 15:9 and the more common 16:9 mentioned in Wikipedia. I don't know the aspect ratio of what you originally downloaded, but I based my guess on the 250x150 evidence, which corresponded nicely with 15:9.

    IME, Movie Maker does not support 15:9 projects, it only supports 4:3 and 16:9. When you look at the Project tab that doesn't mean your source is 16:9, it means the source, whatever its aspect ratio, will be converted to 16:9 by Movie Maker.

    FWIW, my experience has been that when a video is resized, most applications (including Movie Maker) will add black bars if necessary to make it fit a different aspect ratio, rather than stretching the content to fit. Applications that stretch rather than adding bars (as, apparantly, that online converter you use does) are not as common.


    Here's where I am so far:
    - saved original file in Movie Maker as wmv, 250 x 150
    - converted to mov and then flv, making no changes to size
    [...]
    I found this in Inspect Element. For some reason, height is 120 not 150. Wouldn't that explain the bars? AND where did that pixel height come from?
    Yes, if the original was 120 and was resized to 150, that could be via 15-pixel black bars added above and below the original content.

    The 120 height begs the question: what really is the original size? I don't think that's been established yet. We've been jumping to conclusions from various clues, but I haven't seen where that was definitively established.

    I don't know what format the original downloads are in (from various posts it appears maybe you have a choice of formats), but if it's avi, mov, wmv or mp4 you should be able to right-click the file in Windows and select "Properties". Under the "Details" tab it should reveal the dimensions. (That doesn't seem to work for flv files, though.) As you go through the process of converting, editing and resaving, double-check the interim files to see when and where the video dimensions are being changed.


    the narrow black bars are still there. They seemed to be there in the converters as well, but I hoped they wouldn't be in the final version.
    No, once the black bars get in there, they're there for good. They become part of the video content, not merely padding to the content. You have to keep them from getting merged into the video content in the first place.

    (Note the distinction from any black bars added by the webpage player. Those are merely padding added by the player if the player's dimensions are different from the video content, but they're not part of the video itself. In your case the black bars have actually become part of the video content. Your webpage player doesn't seem to be the culprit because it appears WordPress is resizing that fine, given the content you're providing it with.)


    I saved the movie in Movie Maker as a custom size, 250 x 150, as recommended was 426 x 240.
    426x240 corresponds with 16:9, not 15:9. So maybe the original wasn't really 15:9?


    Quote Originally Posted by IreneLinda View Post
    Okay, with more experimenting, re-downloaded original file as mov from stock photo site; opened in Movie Maker; saved with recommended settings; converted to flv and uploaded to page with result in attachment - no bars!
    Yes, if it works without you having to force a resize at any point, that would definitely be the way to go!

  11. The Following User Says Thank You to dg1261 For This Useful Post:

    Rick Corbett (2015-03-24)

  12. #10
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts
    More fabulous help. Thank you so much. Great explanation re. black bars.

    Oops, hadn't realized there was a 15:9 so thought you meant 16:9 in your post. Thanks for the clarification.

    I checked Properties on the mov file "freshly downloaded" from stock photo site with no changes. Size is 320 by 180 which means 16:9, right? So that would be why the "recommended" settings in Windows Movie Maker of 426 x 240 worked since that size is a 16:9 ratio, too. Correct?

    So, given my final experiment resulting in no black bars, I'm going to try the other 2 the same way and see what happens. Have just re-downloaded last two as mov files and both have the same 320 x 180 size. Makes me feel hopeful!

    Will post back once I've tried them out on the site.

    Again, many many thanks for your time, patience and clarity of explanation!

    Linda

  13. #11
    3 Star Lounger
    Join Date
    Dec 2009
    Location
    Northern California
    Posts
    327
    Thanks
    15
    Thanked 142 Times in 91 Posts
    Yep, I think you're on top of things now.

    The original downloads are 16:9, but I got misled by other evidence into thinking it might have been another aspect ratio. Once the video got misshapen by changing the aspect ratio, any attempts to reedit it would result in Movie Maker adding black bars in an effort to force it back into a more conventional aspect ratio.

    Everything should go much smoother now that you understand what each tool is doing. Good luck!

  14. #12
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts
    Oops! Got stumped this morning: when I played the uploaded 16:9 video shown in last post's attachment, only the left side of the interaction was visible. The woman was totally cut out. Hadn't tried to play it last night, just went with still image.

    I suspect this is because the frame width is not wide enough to hold the 16:9 video so the right side is cut off as it plays. The easiest fix would be to can the columns but that isn't an option.

    I'll try some more experimenting to see if I can fix this. Maybe I'll have to live with the bars (but not until I've tried some more!).

    Back to you with results.

    Linda

  15. #13
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts

    Wink

    YAY!! Finally getting back to you with an update ... and success!

    Delay due to issues with Movie Maker: it wouldn't save. Turned out one of the MS patches had done something. Once I "System Restored", Movie Maker worked and could get going on this again...

    Went back to your advice
    So, the solution is to go back to the original wmv file and start over. Reedit it to add your audio, convert it, and re-upload it. And if you're going to go through that trouble, you might as well redo all three and see if you can fix the stretching this time.
    .

    Did just that: re-downloaded MOV files from stock site; opened in WLMM; added audio tracks; saved in WMV format using Recommended Settings (i.e., I did no customizing of sizes); converted to FLV (using the great free and simple converter at http://www.online-convert.com), again making no changes to sizes; replaced the current video with the new FLV file in WordPress .. and it worked!

    The new images are not as "square" as the former ones, but fit beautifully as the frame adjusts to be more rectangular.

    I suspect I was trying to do too much (not knowing exactly what to do given my inexperience in this area). Did much better once I just let the automatic features in WordPress (and the other programs) do what was necessary for me!

    Regardless, the 3 videos are all there now and you're welcome to check them at http://www.mygoforthegreen.com/pro-shop.

    Thank you SO much for helping me through this lengthy and often confusing (to me) process. I am overjoyed to have got things working at last - with your generous help. AND I have carefully documented and saved exactly what I did, step by step!

    Happily,

    Linda

  16. #14
    Super Moderator Rick Corbett's Avatar
    Join Date
    Dec 2009
    Location
    South Glos., UK
    Posts
    2,143
    Thanks
    101
    Thanked 580 Times in 464 Posts
    Some excellent posts by dg1261. Good to hear your problem has been sorted, Linda. I've earmarked the thread so I don't fall foul of the same issues.

  17. #15
    Bronze Lounger
    Join Date
    Sep 2002
    Location
    Naples, Florida, USA
    Posts
    1,231
    Thanks
    40
    Thanked 3 Times in 3 Posts
    Yes, I agree, Rick, dg1261's posts were amazing: so detailed, helpful, clearly stated. Hope you find the thread of assistance in the future!

    Linda

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •