foundation-sites/scss/components/_responsive-embed.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group responsive-embed
////

/// Margin below a responsive embed container.
/// @type Number
$responsive-embed-margin-bottom: rem-calc(16) !default;

/// Aspect ratios used to determine padding-bottom of responsive embed containers.
/// @type Map
$responsive-embed-ratios: (
  default: 4 by 3,
  widescreen: 16 by 9,
) !default;

// WARNING: Will be removed in version 6.4
$responsive-embed-ratio: default;

/// Creates a responsive embed container.
/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
@mixin responsive-embed($ratio: default) {
  @if type-of($ratio) == 'string' {
    $ratio: map-get($responsive-embed-ratios, $ratio);
  }
  position: relative;
  height: 0;
  margin-bottom: $responsive-embed-margin-bottom;
  padding-bottom: ratio-to-percentage($ratio);
  overflow: hidden;

  iframe,
  object,
  embed,
  video {
    position: absolute;
    top: 0;
    #{$global-left}: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin foundation-responsive-embed {
  .responsive-embed,
  .flex-video {
    @include responsive-embed($ratio: default);

    $ratios: map-remove($responsive-embed-ratios,default);

    @each $name, $ratio in $ratios {
      &.#{$name} {
        padding-bottom: ratio-to-percentage($ratio);
      }
    }
  }
}

@mixin foundation-flex-video {
  @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
  @include foundation-responsive-embed;
}

@mixin flex-video($ratio: $responsive-embed-ratio) {
  @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
  @include responsive-embed($ratio);
}