Generated by SassMeister.com.

input.scss

// iFrame mit Aspect-Ratio

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    padding-bottom: 56.25%;
    
    .embed-responsive-item,
    iframe,
    embed,
    object,
    video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

// modifier classes for aspect ratios
/*
embed-responsive-1by1
embed-responsive-4by3
embed-responsive-4by5
embed-responsive-9by16
embed-responsive-16by9
embed-responsive-21by9
*/
/*
$embed-responsive-aspect-ratios: (
    "1by1": 100%,
    "4by3": 75%,
    "4by5": 75%,
    "9by16": 56.25%,
    "16by9": 56.25%,
    "21by9": 42.857142%
) !default;
 */
$embed-responsive-aspect-ratios: (
    "1by1": 1 / 1,
    "4by3": 3 / 4,
    "4by5": 5 / 4,
    "9by16": 16 / 9,
    "16by9": 9 / 16,
    "21by9": 9 / 21
) !default;

@each $key, $ratio in $embed-responsive-aspect-ratios {
    .embed-responsive-#{$key} {
        padding-bottom: percentage($ratio)
 }
}

// für den Test

.embed-responsive-item {
  background: #a20000;
  color: #fff;
  font-size: 30px;  
}

output.css

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  padding-bottom: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
embed-responsive-1by1
embed-responsive-4by3
embed-responsive-4by5
embed-responsive-9by16
embed-responsive-16by9
embed-responsive-21by9
*/
/*
$embed-responsive-aspect-ratios: (
    "1by1": 100%,
    "4by3": 75%,
    "4by5": 75%,
    "9by16": 56.25%,
    "16by9": 56.25%,
    "21by9": 42.857142%
) !default;
 */
.embed-responsive-1by1 {
  padding-bottom: 100%;
}

.embed-responsive-4by3 {
  padding-bottom: 75%;
}

.embed-responsive-4by5 {
  padding-bottom: 125%;
}

.embed-responsive-9by16 {
  padding-bottom: 177.77778%;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-21by9 {
  padding-bottom: 42.85714%;
}

.embed-responsive-item {
  background: #a20000;
  color: #fff;
  font-size: 30px;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}