Flex Video in Foundation

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.


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

Customize with Sass

Flex video can be easily customized using our Sass variables.

$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%;