(window resize) Scaled container with video and z-index

Scaled container with a video and a div above. Div appears at certain scale values

by Sophie

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
        </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: 1px 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);
}

.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;
}

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

.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 = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaledContainer = document.getElementById("scaled-container");
var scaleInfo = document.getElementById("scale-info");

this.debouncedOnResizeHandler = _.debounce(step.bind(this), 50);
window.addEventListener("resize", this.debouncedOnResizeHandler);
      
step();

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 scale = (Math.min(heightScale, widthScale) * 1000 / 1000).toFixed(3);
  
  console.error("scale", scale);
/* 
  var top = Math.round(availableHeight / 2 - contentHeight / 2 + padding);
  var left = Math.round(availableWidth / 2 - contentWidth / 2 + padding);
 */
  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 (currentScale === goalScale) {
    shouldScaleUp = false;
...