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.

HTML

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

Rendered HTML

Advanced

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

HTML

<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>

Rendered HTML


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";




Building Blocks Using Flex Video


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »