Videos

Videos in HTML can be embedded into a document in a few different ways. If you’re using YouTube or Vimeo, they provide an <iframe> for embedding videos. Flash based video implementations use the <object> and <embed> elements. And then there is the native HTML5 <video> element.

Regardless of the method you use embedding a video, chances are you want that video to be responsive (or fluid). For those cases, you have the .video-wrapper element:

<div class="video-wrapper">
  <iframe src="..."></iframe>
</div>

You also have the .video-item class to specifically declare a video.

<div class="video-wrapper">
  <iframe class="video-item" src="..."></iframe>
</div>

Video Ratios

The default video ratio can be set using the $videos('ratio') variable (56.25% by default). Alternatively, you can also specifically set a video’s ratio by applying the ratio classes to the video wrapper element.

<!-- Sets video ratio to 16x9 (56.25% height) -->
<div class="video-wrapper ratio-16x9">...</div>

<!-- Sets video ratio to 4x3 (75% height) -->
<div class="video-wrapper ratio-4x3">...</div>

For more information on the technique BaseWeb uses to create fluid videos, checkout this tutorial over at CSS-Tricks.

Variable Map

Video variables are encompassed within the $videos map and are used in video mixins to set default values.

$videos: (
  'output' : true,
  'margin' : 2em 0,
  'ratio' : 56.25% // The default video ratio (56.25% = 16 by 9)
) !default;

aspect-ratio

Returns the aspect ratio in the form of a percentage.

aspect-ratio( $width, $height )
Variable Type Default Description
$width Number None Width aspect ratio
$height Number None Height aspect ratio
Return Height percentage of aspect ratio

make-video-fluid

Adds styles for creating fluid videos. Should be applied to a wrapping element of a video.

@include make-video-fluid( $options: () );
Variable Type Default
$options Map $video

build-video-ratio

Creates a ratio class using an aspect width and height. The class that’s created uses the passed in ratio .ratio-AxB where A is the passed in width and B is the passed in height.

@include build-video-ratio( $width, $height );
Variable Type Default
$width Width aspect ratio (number) None
$height Height aspect ratio (number) None

Example Usage

// SCSS
.video-wrapper {
  @include build-video-ratio(16, 9);
  @include build-video-ratio(4, 3);
}

// CSS Output
.video-wrapper .ratio-16x9 {
  padding-bottom: 56.25%;
}
.video-wrapper .ratio-4x3 {
  padding-bottom: 75%;
}