Adjust flex video sizing

I started digging poking into the flex video styling when I noticed my Vimeo videos had a black bar at the top. Playing around with the webkit inspector I was able remove it by adjusting the padding-bottom value. 

To be ensure I wasn't going to mess up another player by tweaking the values I put uploaded test videos in 4:3 and 16:9 aspect ratio to YouTube and Vimeo. The videos have a yellow 2-pixel border which would be my guide to make sure I wasn't cropping content or leaving a black border.

I created a sample page with copies of the players at different sizes to try it out (the markup I used is below).

It was apparent that there were problems, this is a screenshot using the styling in the master branch:
![screen shot 2013-08-25 at 9 11 53 pm](https://f.cloud.github.com/assets/68750/1023759/bbeea846-0e05-11e3-85ea-5957210bffa0.png)

The widescreen, 16:9 ratio (56.25%) player had rows of black pixels at the top from the fractional component, rounding down fixed this.

The 4:3 ratio (75%) player ends up with black columns on the sides. I mesured the YouTube player's chrome and it's only 30 pixels tall. So it seems like it'd be better to just use the 4:3 ratio (75%) and then just add the chrome height to that. 

Here's the same players using the variables from this branch:

![screen shot 2013-08-25 at 8 54 17 pm](https://f.cloud.github.com/assets/68750/1023738/7d69434e-0e03-11e3-8cf9-e792c47731a4.png)

Here's the HTML I was testing with that includes larger versions of the players:

```
    <div class="row">
      <div class="large-12 columns">
        <div class="flex-video widescreen">
          <iframe width="640" height="360" src="//www.youtube.com/embed/KmrfyB_1k_E" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div class="flex-video">
          <iframe width="640" height="480" src="//www.youtube.com/embed/6EvKxphL3XA" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="flex-video widescreen vimeo">
          <iframe src="//player.vimeo.com/video/73106989" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <div class="flex-video vimeo">
          <iframe src="//player.vimeo.com/video/73108037" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 columns">
        <div class="flex-video widescreen">
          <iframe src="//www.youtube.com/embed/KmrfyB_1k_E" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
      <div class="large-6 columns">
        <div class="flex-video">
          <iframe src="//www.youtube.com/embed/6EvKxphL3XA" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="large-6 columns">
        <div class="flex-video widescreen vimeo">
          <iframe src="//player.vimeo.com/video/73106989" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
      <div class="large-6 columns">
        <div class="flex-video vimeo">
          <iframe src="//player.vimeo.com/video/73108037" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
    </div>
```