Scaled container with video and z-index: above lies a div with a lot of border

This solution does not have overflow: hidden; set

by jonahe

HTML

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

<div id="wrapper">
</div>

<div id="scaled">



  <div id="scale-info">

  </div>
      <div class="content-3">
    <div class="content-2">
  <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>
</div>

CSS

#wrapper {
    border-color: black;
    border-style: solid;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
 
}

#scale-info {
  display: none;
}

#scaled {
  background: #cccccc;
  width: 1024px;
  height: 768px;
  position: fixed;
  box-sizing: border-box;
  border: 4px solid red;
  
  
}

.content-2 {

}

.content-3 {
}

.content {

  width: 1024px;
  height: 768px;
  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 scaleInfo = document.getElementById("scale-info");
var wrapper = document.getElementById("wrapper");

    this.debouncedOnResizeHandler = _.debounce(_onResize, 50);
    window.addEventListener("resize", this.debouncedOnResizeHandler);
    
    _onResize();
function _onResize() {
console.log("resize")
 var availableHeight = window.innerHeight;
  var availableWidth = window.innerWidth;

  var contentWidth = availableWidth < 1024 ? 1024 : 1024;
  var contentHeight = availableHeight < 768 ? 768 : 768;

  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(2);


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


/*    
    if (top <= 0) {
   
          borderY = 0 + "px";
   
    }
    if (left <= 0) {
   
     borderX = 0 + "px";
    } */
    

      console.log('top',top);
      console.log("scale", scale);
      console.log("availableHeight", availableHeight)
      console.log("contentHeight", contentHeight);

    
      var borderY = Math.ceil((availableHeight - (contentHeight * scale)) /2)+0;
   var borderX =  Math.ceil((availableWidth - (contentWidth * scale)) /2)+0;
   
    console.log("borderY", borderY);  
    console.log("borderX", borderX);
    console.log("left", left);

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

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