Responsive Video

Type: Mixin

@include responsive-video();

* You can call mixins with or without gls- namespace (e.g. @include gls-responsive-video();).

Responsive Video Sass mixin helps you create responsive containing elements with a fixed aspect ratio that you define. This is especially useful when you embed videos from youtube or similar sources.

Important: Any direct child element you put inside the responsive video containers will be positioned absolute and take up as much space as the containing element. So, do not put more than one direct child element into the responsive video containers.

Github Source Code

Arguments

Name	Type	Description
`$ratio`	`string, number`	The aspect ratio of the video. Accepts either `number` or `string` type of values. The value must be formatted something like this: `16/9`, `4/3`, `1/1` based on the ratio of the video that you want to embed. Default ratio value is set to `16/9`.

* The value you pass can be with or without the quotation marks.

Examples

Simply call the mixin without passing any argument. Remember that the default $ratio value is set to 16/9.

<div class="element">
  <iframe src="https://www.youtube.com/embed/JBc6JiRlsOU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element{
  @include responsive-video;
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Try to resize the browser screen to see the result.

Now, let’s try with a video clip that has 4/3 aspect ratio and pass the related value for $ratio argument. Comes from the loving voice of Anna German.

<div class="element">
  <iframe src="https://www.youtube.com/embed/KYaCmvyK50Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element{
  @include responsive-video(4/3);
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now, let’s pass a string value.

<div class="element">
  <iframe src="https://www.youtube.com/embed/fiyABGQnF5A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element{
  @include responsive-video("16/9");
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now let’s pass a string value and use colon punctuation mark. The result will be the same.

<div class="element">
  <iframe src="https://www.youtube.com/embed/ymf7DZUeVow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element{
  @include responsive-video("16:9");
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

You can change the width value of the selected element if you like, the aspect ratio won’t be collapsed.

<div class="element">
  <iframe src="https://www.youtube.com/embed/dK6Gvee-ri4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element{
  width: 400px;
  @include responsive-video("16:9");
}

//CSS Output
.element {
  width: 400px;
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}