- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Flex Video SASS Reference
Description
You can change the styles of the components by using SASS Reference.
Variables
The following table lists the SASS variables in a project's settings file that makes the component's default styles to get customized.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$flexvideo-padding-top It represents the padding above the container of flex video. |
Number | rem-calc(25) |
| 2 |
$flexvideo-margin-bottom It represents the margin below the container of flex video. |
Number | rem-calc(16) |
| 3 |
$flexvideo-ratio It represents the padding used to create an aspect ratio of 4:3. |
Number | 4 by 3 |
| 4 |
$flexvideo-ratio-widescreen It represents the padding used to create an aspect ratio of 16:9. |
Number | 16 by 9 |
Mixins
To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.
flex-video
@include flex-video($ratio);
It is used to create a flex video container. It accepts $ratio parameter which is explained below.
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$ratio It represents the container's ratio and formatted as x by y. |
List | $flexvideo-ratio |
Functions
flex-video
flex-video($ratio)
It creates a height in percentage which is used as padding in container of flex video. It accepts the parameter $ratio, which is of type List. The parameter $ratio represents the container's ratio and formatted as x by y.