_video.scss

/*------------------------------------*\
  #VIDEO
\*------------------------------------*/

/*doc
---
title: Video
name: video
category: Components
---

Responsive container for video embeds. Make sure to specify an aspect ratio.

## Aspect Ratios
Modifier    | Class
----------- | ----------------
16:9        | `video--16:9`
4:3         | `video--4:3`


```html_example
<div class="video video--16:9">
  <iframe class="video__embed" src="http://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>
```

*/

.video {
  position: relative;
  width: 100%;
  height: 0;
}

  .video__embed {
    position: absolute;
    height: 100% !important;
    width: 100% !important;
  }

  /**
   *  Widescreen/16:9 aspect ratio
   */
  .video--16\:9 {
    padding-bottom: 56.25%;
  }

  /**
   * Standard/4:3 aspect ratio
   */
  .video--4\:3 {
    padding-bottom: 75%;
  }