Scaling Iframes

HTML

<div class="column">
  <div data-intrinsic="1">
    <div data-intrinsic-spacer></div>
<iframe
                src="http://www.yourchristmascountdown.com/?iframe=true&apos=0&name=Wranglers" frameborder="0"
                scrolling="no" style="width:100%; height:450px"></iframe>
    <div class="shield"></div>
  </div>
</div>

CSS

body {
  margin: 0
}
 
.column {
  width: 600px;
  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-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);
}

JavaScript

renderIntrinsicIframe = function() {
  var iframe = document.querySelector('iframe');
  var spacer = iframe.parentNode.querySelector('[data-intrinsic-spacer]');
  iframe.style.transform = 'scale(' + spacer.clientHeight / iframe.width + ')';
};

window.addEventListener('resize', renderIntrinsicIframe);
renderIntrinsicIframe();