Adjust flex video sizing

YouTube's chrome is only 30 pixels tall so we can use the 4:3 ratio (75%) and then just add the chrome height to that. When the widescreen, 16:9 ratio (56.25%) has a fractional component it causes a black line to appear at the top of the player, rounding down fixed this.

I put uploaded test videos in 4:3 and 16:9 aspect ratio to YouTube and Vimeo to test this out. Then put versions of each at different sizes to make sure the entire image was displayed with no border. Here's a screen shot:

![screen shot 2013-08-25 at 8 54 17 pm](https://f.cloud.github.com/assets/68750/1023738/7d69434e-0e03-11e3-8cf9-e792c47731a4.png)

The videos have a yellow 2-pixel border which is visible in all the players.

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>
```