JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div id=native>
  <aside>
    <video controls muted autoplay>
      <source src="https://download.blender.org/durian/trailer/sintel_trailer-480p.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>

    <button class="btn1">
      button 1
    </button>

    <button class="btn2">
      button 2
    </button>
  </aside>
</div>

CSS

/* Demo Content styles */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
}

div {
  max-width: 854px;
  width: 854px;
  height: 480px;
  margin: 200px auto;
  font-family: sans-serif;
  position: relative;
}

aside {
  width: 854px;
  height: 480px;
  background: #eee;
  position: absolute;
  top: 0;
  left: 0;
}

video {
  max-width: 100%;
}

#native {
  --kaelWidth: 854;
  width: 100%;
  height: calc((var(--kaelWidth) / (854 x 480)) * 1px);
}

#native aside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(calc(var(--kaelWidth) / 854));
}

.btn1 {
  position: absolute;
  top: 200px;
  left: 200px;
}

.btn2 {
  position: absolute;
  top: 200px;
  left: 400px;
}

JavaScript

function kaelScale() {
  var tag = document.querySelectorAll('#native')
  for (var i = 0; i < tag.length; i++) {
    tag[i].style.setProperty('--kaelWidth', tag[i].offsetWidth)
  }
}

window.addEventListener('load', kaelScale)
window.addEventListener('resize', kaelScale)
window.addEventListener('input', kaelScale)
window.addEventListener('click', kaelScale)