_flexembed.scss

/*  =========================================================================
    objects.flexembed
    For use with multi-media embeds, such as videos or slideshows, that need to
    retain a specific aspect ratio but adapt to elements of variable widths.
    ========================================================================= */

/*  Variables
    ========================================================================= */

/**
 * Spacing
 */
$supple-flexembed-space: $supple-space !default;


/**
 * Ratio's
 * Define ’em like this:
 * $supple-flexembed-ratios: (
 *   (2:1),
 *   (4:3),
 *   (16:9),
 * );
 */
$supple-flexembed-ratios: (
  (2:1),
  (4:3),
  (16:9)
) !default;



/*  Module
    ========================================================================= */

/**
 * 1. Default cropping is a perfect square, in you own modules you can override
 *    the ratio like this: (16/9)
 */
.o-flexembed {
  --o-flexembed-ratio: (1/1); /* [1] */
  position: relative;
  display: block;
  height: 0;
  padding: 0 0 calc(100% / var(--o-flexembed-ratio));
  overflow: hidden;
  @include supple-rem(margin-bottom, $supple-flexembed-space);
}

/**
 * The actual embed/item
 */
.o-flexembed__item,
.o-flexembed > iframe,
.o-flexembed > embed,
.o-flexembed > object {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}



/*  Common ratio modifiers, for use in browsers without
    custom-property support
    ========================================================================= */

@each $ratio in $supple-flexembed-ratios {
  @each $a, $b in $ratio {
    @if (type-of($a) != number or type-of($b) != number) {
      @error '`#{$a}` and `#{$b}` need to be numbers.';
    }

    .o-flexembed--#{$a}by#{$b} {
      padding-bottom: 100% / ($a/$b);
    }
  }
}