div.flex-video to create an intrinsic ratio that will properly scale your video on any device.4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only — no extra padding for the controls.
There are two ways to build flex-video containers in Foundation 4: with our predefined HTML classes or with our mixins. Building flex-video containers using our classes is simple, you'll just need to create a <div class="flex-video"> and apply the classes you want to style it appropriately.
The available class options:
widescreen: Will give the player a widescreen aspect ratio.vimeo: This will ensure that we don't add extra padding since Vimeo has controls within the player, itself.For these styles to come across, make sure you have the default Foundation CSS package or that you've selected flex-video from a custom package. These should be linked up following our default HTML page structure.
We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the extension installed or grab _foundation-global.scss and _flex-video.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:
<%= code_example ' @import "foundation/foundation-global", "foundation/flex-video"; ', :css %>The markup is just like we showed you above, but you can apply the mixin to your own custom class or ID.
<%= code_example 'You can build your flex-video containers using our global mixin by including it on your custom class or ID in your own stylesheet. The defaults can be modified using the available variables. The global mixin looks like this:
<%= code_example ' /* Using the default styles */ .your-class-name { @include flex-video; }', :css %>Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.