Flex Video

Flex Video lets browsers automatically scale video objects in your webpages. 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.

Basic

You can create a flex video with minimal markup.

<div class="flex-video">
        <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>

Advanced

Additional classes can be added to your flex video to change its appearance.

<div class="flex-video widescreen vimeo">
  <iframe src="http://player.vimeo.com/video/60122989" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Customize with Sass

Flex video can be easily customized using our Sass variables.

SCSS

$include-html-media-classes: $include-html-classes;

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

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

Semantic Markup with Sass

You can create your own flex video using our Sass mixins.

Basic

You can use the flex-video-container() mixin to create your own flex-video container, like so:

SCSS

.custom-flex-video-class {
  @include flex-video-container();
}

HTML

<div class="custom-flex-video-class">
  <iframe src="http://player.vimeo.com/video/21762736" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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