Flex video

Here is a demo showing the usage of flex-video class from Zurb Foundation. It keeps the proportion of the embed video player, resulting in a much better looking in various screen sizes.

An extra widescreen class would make the hight calculation uses the widescreen ratio.

<div class='row'>
  <div class='small-9 columns'>
    <div class="flex-video widescreen">
      <iframe src="//www.youtube.com/embed/KBA4IzyEUDU?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class='small-3 columns'>Sidebar</div>
</div>

Open example in jsFiddle

What’s next? We’re going to take a look at “Foundation topbar”.