Skip to content

Instantly share code, notes, and snippets.

@xpsdeset
Created November 13, 2023 16:08
Show Gist options
  • Save xpsdeset/6abe8d80dc8f9545b08b68a501038551 to your computer and use it in GitHub Desktop.
Save xpsdeset/6abe8d80dc8f9545b08b68a501038551 to your computer and use it in GitHub Desktop.
Removes blackbars from videos
(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()
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment