Flex Video

If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in 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.

Build With Predefined HTML Classes

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.
<div class="flex-video">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>

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.

Build with our Mixins

We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _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:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/flex-video";

The markup is just like we showed you above, but you can apply the mixin to your own custom class or ID.

<div class="your-class-name">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
Quick Mixin

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:

/* Using the default styles */
.your-class-name { @include flex-video-container; }
Default SCSS Variables
$include-html-media-classes: $include-html-classes;

/* We use these to control video container padding and margins */
$flex-video-padding-top: em-calc(25);
$flex-video-padding-bottom: 67.5%;
$flex-video-margin-bottom: em-calc(16);

/* We use this to control widescreen bottom padding */
$flex-video-widescreen-padding-bottom: 57.25%;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video