iframe-scaling.html

<style>
body {
  margin: 0;
  background: #e0e0e0;
}

.column {
  width: 532px;
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 2em;
  box-sizing: border-box;
  min-height: 100vh;
}

[data-intrinsic] {
  position: relative;
  height: 0;
  width: 100%;
  overflow: hidden;
}

[data-intrinsic="1"] {
  padding-bottom: 100%;
}

[data-intrinsic="0.5"] {
  padding-bottom: 50%;
}

[data-intrinsic-spacer] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* for testing, should be fully eclipsed */
  background: red;
}

[data-intrinsic] iframe {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: #fff;
}

.shield {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, .2);
}
</style>

<div class="column">
  <div data-intrinsic="1">
    <div data-intrinsic-spacer></div>
    <iframe width="500" height="500" src="https://eager.io/blog"></iframe>
    <div class="shield"></div>
  </div>

  <br>
  <br>

  <div data-intrinsic="0.5">
    <div data-intrinsic-spacer></div>
    <iframe width="500" height="250" src="https://eager.io/blog"></iframe>
    <div class="shield"></div>
  </div>

  <br>
  <br>

  <div data-intrinsic="0.5">
    <div data-intrinsic-spacer></div>
    <iframe width="2000" height="1000" src="https://eager.io/blog"></iframe>
    <div class="shield"></div>
  </div>
</div>

<script>
  renderIntrinsicIframe = function() {
    document.querySelectorAll('iframe').forEach(function(iframe){
      var spacer = iframe.parentNode.querySelector('[data-intrinsic-spacer]');
      var scale = spacer.clientWidth / parseInt(iframe.width, 10);
      iframe.style.transform = 'scale(' + scale + ')';
    });
  };

  window.addEventListener('resize', renderIntrinsicIframe);
  renderIntrinsicIframe();
</script>