zurb-foundation-5/doc/pages/components/flex_video.html

Foundation 5 for npm (no code modification from original repo)

---
title: Flex Video
---

<h3 class="subheader">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.</h3>

***

<div class="row">
  <div class="large-6 columns">
    <div class="flex-video">
      <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="large-6 columns">
    <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>
  </div>
</div>

***

<h2>Basic</h2>

You can create a flex video with minimal markup.

<div class="row">
  <div class="large-6 columns">

    <h4>HTML</h4>

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

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

<h2>Advanced</h2>

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

<div class="row">
  <div class="large-6 columns">

    <h4>HTML</h4>

{{#markdown}}
```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>
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <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>
  </div>
</div>

***

## Customize with Sass

Flex video can be easily customized using our Sass variables.

<h4>SCSS</h4>

{{> examples_flex_video_variables}}

***

## Semantic Markup with Sass

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

<h3>Basic</h3>

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

<h4>SCSS</h4>

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

<h4>HTML</h4>

{{#markdown}}
```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>
```
{{/markdown}}

***

### Sass Errors?

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

<h4>SCSS</h4>

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