(working) Scaled container with outer container

Scaled container with a video and a div above. Div appears at certain scale values. Linked to from StackOverflow.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="scaled-container">


  <div id="scaled">
    <div id="scale-info">

    </div>
    <div class="content">
      <h2 class="below below-1">
        I have z-index 1

      </h2>

      <div class="on-top">
        <h1>
          I should always be on top.<br /> I have z-index 5
                  <div class="large">
        
        Large
        </div>
        </h1>
      </div>

      <h2 class="below below-2">
        I have z-index 3
      </h2>
      <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
      <h2 class="below below-3">
        I have z-index 4
      </h2>
    </div>
  </div>
</div>

CSS

#scaled-container {
  position: absolute;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  border: 10px solid red;
}

#scaled {
  background: #cccccc;
  width: 1024px;
  height: 768px;
  position: absolute;
  transform-origin: left top;
}

.content {
  height: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: rgba(34, 34, 56, 0.2);
}

.large {
  width: 2000px;
  background: blue;
}

.below {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0px;
  top: 100px;
  background: purple;
  z-index: 1;
  opacity: 0.8;
}

.below-2 {
  z-index: 3;
  right: 100px;
}

.below-3 {
  z-index: 4;
  right: -40px;
  animation: blink-blink 1s ease infinite;
}

@keyframes blink-blink {
  50% {
    opacity: 0.7;
  }
}

.on-top {
  position: absolute;
  width: 50px;
  right: 300px;
  top: 150px;
  background: pink;
  z-index: 5;
  padding: 20px;
  overflow: hidden;
}

.on-top h1 {
  font-size: 20px;
}

#video {
  position: absolute;
  z-index: 4;
  width: 1024px;
  height: 768px;
  background: rgba(0, 0, 0, 0.4);
}

JavaScript

var goalScale = 1.4;
var startScale = 1;
var scale = 1;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaledContainer = document.getElementById("scaled-container");
var scaleInfo = document.getElementById("scale-info");

function step() {
  var padding = 0;
  var maxWidth = 1024;
  var minWidth = maxWidth;
  var maxHeight = 768;
  var minHeight = maxHeight;
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  var availableWidth = windowWidth - padding * 2;
  var availableHeight = windowHeight - padding * 2;

  var contentWidth = availableWidth < maxWidth ? minWidth : maxWidth;
  var contentHeight = availableHeight < maxHeight ? minHeight : maxHeight;

  contentWidth = Math.round(contentWidth);
  contentHeight = Math.round(contentHeight);

  var heightScale = availableHeight / contentHeight;
  var widthScale = availableWidth / contentWidth;

  var top = Math.round(availableHeight / 2 - (contentHeight * scale) / 2 + padding);
  var left = Math.round(availableWidth / 2 - (contentWidth * scale) / 2 + padding);

  container.style.transform = "scale(" + (scale) + ")";
  container.style.width = contentWidth + "px";
  container.style.height = contentHeight + "px";

  scaledContainer.style.width = contentWidth * (scale) + "px";
  scaledContainer.style.height = contentHeight * (scale) + "px";
  scaledContainer.style.top = top + "px";
  scaledContainer.style.left = left + "px";

  scaleInfo.innerText = "Scale: " + (scale);

  if (scale === goalScale) {
    shouldScaleUp = false;
  }
  if (scale === startScale) {
    shouldScaleUp = true;
  }

  if (shouldScaleUp) {
    scale = (scale + 0.005);
  } else {
    scale = (scale - 0.005);
  }

  scale = Math.round(scale * 1000) / 1000;

  window.requestAnimationFrame(step)
}

window.requestAnimationFrame(step);