Simple intrinsic ratio CSS for responsive iframe with added bonus of using CSS custom properties to set the ratio based on width and height values.

5-utils-intrinsic-ratio.css

.u-intrinsicRatio {
  --intrinsicRatio-width: 4;
  --intrinsicRatio-height: 3;
  position: relative;
  padding-bottom: calc(100% * (var(--intrinsicRatio-height) / var(--intrinsicRatio-width)));
  height: 0;
  overflow: hidden;
}

.u-intrinsicRatio > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

example.html

<div class="u-intrinsicRatio" style="--intrinsicRatio-width: 600; --intrinsicRatio-height: 450;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11105.781763217377!2d-111.77621831145693!3d40.70896121377259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x875266cc99e2a0d3%3A0x318ecd5a5bbd8d08!2sGrandeur+Peak!5e1!3m2!1sen!2sus!4v1523276592328" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>