How To

This Responsive iframe component allows you to display a responsive iframe element whose height is modified according to the aspect ratio of its content.

It can be used to embed content like YouTube or Vimeo videos (that are not responsive by default).

The default aspect ratio used for the iframe is 16:9 (which is the standard YouTube video aspect ratio).

You can create variations of the .responsive-iframe class to cover different aspect ratios.
For example, for the 4:3 ratio you can use the following class modifier:

.responsive-iframe--4\:3 {
  padding-bottom: 75%; // 4:3
}