Removes blackbars from videos

yscale.js

(function () {
  window.Yscale = {}
  Yscale.html = `
<style>
#Yscale{
position:fixed;
z-index:10000;
top:40%;
left:40%;
width:90px;
}

#Yscale .content{
position:relative;
background-color:#fefefe;
margin:auto;
padding:5px;
border:1px solid #888;
width:80%;
border-radius:5px;
text-align:center;
font-size:12px;
color:#000;
}





#Yscale input{
width:50px;
margin:10px 0px;
}

</style>
<div id="Yscale">
<div class="content">
<input id="YScale-val" value=33 min="1" type=number onchange="Yscale.change()"><button onclick="Yscale.close()">Close</button>
</p>
</div>
</div>
`
  const $ = document.querySelector.bind(document)
  var r = $(":root")
  Yscale.close = () => ($("#Yscale").style.display = "none")
  Yscale.change = () => {
    let val = $("#YScale-val").value
    val = val.padStart(2, "0")
    r.style.setProperty("--sy", `1.${val}`)
  }

  Yscale.init = () => {
    let video = $("video")
    if (location.host.includes("primevideo")) video = $(".rendererContainer")
    let pre = ""
    if (location.host.includes("netflix")) pre = "translate(-50%, -50%)"
    if (!$("#Yscale")) {
      const newEl = document.createElement("div")
      newEl.innerHTML = Yscale.html
      document.body.appendChild(newEl)
      video.style.transform = pre + "scaleY(var(--sy))"
      video.style.height = `99%`
    } else $("#Yscale").style.display = "block"
    Yscale.change()
  }

  Yscale.init()
})()