page to be consumed by auto-sizing iframe

by JakobJingleheimer

HTML

<h1>Hello World</h1>

<div class="youtube-container">
  <iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/4MCjU-Du3eI" frameborder="0" allowfullscreen></iframe>
</div>

CSS

html,
body {
  display: block;
  width: 100%;
}

.youtube-container {
  height: 0;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.youtube-video {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

JavaScript

function emitHeight() {
	window.postMessage({height: document.body.clientHeight}, '*');
}

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