Responsive iframe

Overview

The responsive-iframe module is used to apply a fixed pixel aspect ratio (PAR) to an interior iframe. This is particularly useful for embedded videos that need to resize along with the viewport.

Note that the responsive-iframe must be a parent of the iframe; the class cannot be applied on the iframe itself.

PAR Modifiers

The responsive-iframe module has a default PAR of 16:9. The following PAR modifiers are available by default:

  • responsive-iframe--par-4-3
  • responsive-iframe--par-16-9
  • responsive-iframe--par-21-9

Additionally, the responsive-iframe--par mixin can be used to easily create new fixed PAR modifiers.

Examples

Basic 16:9