--- title: Flex Video layout: component.html ---

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

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

Advanced

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

HTML

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

*** ## Customize with Sass Flex video can be easily customized using our Sass variables.

SCSS

{{> examples_flex_video_variables}} *** ## 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

{{#markdown}} ```scss .custom-flex-video-class { @include flex-video-container(); } ``` {{/markdown}}

HTML

{{#markdown}} ```html
``` {{/markdown}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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