Here is a demo showing the usage of responsive-embed class from Zurb Foundation. It keeps the proportion of the embed video player, resulting in a much better looking in various screen sizes. Additional widescreen class or panorama class allows different ratio.
<div class="responsive-embed">
<iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>
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
Flexible video Flexible video