Flex Video
Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.
Embedded videos won't maintain their aspect ratio as the width of the screen changes. To avoid squished videos, wrap them in a container with the class .flex-video.
<div class="flex-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
</div>
The default ratio is 4:3. Add the .widescreen class to change it to 16:9.
<div class="flex-video widescreen">
<iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>
Embedded Vimeo videos are special snowflakes of their own. Add the .vimeo class to a flex video container that wraps a Vimeo embed.
<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>
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$flexvideo-margin-bottom |
Number | rem-calc(16) |
Margin below a flex video container. |
$flexvideo-ratio |
Number | 4 by 3 |
Padding used to create a 4:3 aspect ratio. |
$flexvideo-ratio-widescreen |
Number | 16 by 9 |
Padding used to create a 16:9 aspect ratio. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
flex-video
@include flex-video($ratio);Creates a flex video container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$ratio |
List | $flexvideo-ratio |
Ratio to use for the container, formatted as |
Functions
flex-video
flex-video($ratio)Creates a percentage height that can be used as padding in a flex video container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$ratio |
List | None |
Ratio to use to calculate the height, formatted as |
