Skip to content

Instantly share code, notes, and snippets.

@xpsdeset
Last active September 3, 2021 19:07
Show Gist options
  • Save xpsdeset/e17896bb1e6477ee83803dae4ca191f9 to your computer and use it in GitHub Desktop.
Save xpsdeset/e17896bb1e6477ee83803dae4ca191f9 to your computer and use it in GitHub Desktop.
Y scale video

Y scale videos

We come across videos that don't fully scale to the resoltuion of your monitor. This bookmarklet allows you to modify the yscale of the video and enjoy it in full height.

We come a cross many videos which do not fit the monitor resolution end to end. This bookmarklet allows you to change the aspect ratio of the video.

Right click on the bookmark bar and click on add a page, Create a new bookmark add below to the location.

javascript:(function()%7Bwindow.Yscale%20%3D%20%7B%7D%0AYscale.html%20%3D%20%60%0A%3Cstyle%3E%0A%23Yscale%20%7B%0A%20%20position%3A%20fixed%3B%0A%20%20z-index%3A%2010000%3B%20%0A%20%20top%3A%2040%25%3B%0A%20%20left%3A%2040%25%3B%0A%20%20width%3A%20390px%3B%0A%7D%0A%0A%23Yscale%20.content%20%7B%0A%20%20position%3A%20relative%3B%0A%20%20background-color%3A%20%23fefefe%3B%0A%20%20margin%3A%20auto%3B%0A%20%20padding%3A%2020px%3B%0A%20%20border%3A%201px%20solid%20%23888%3B%0A%20%20width%3A%2080%25%3B%0A%20%20border-radius%3A%205px%3B%0A%20%20box-shadow%3A%200%204px%208px%200%20rgba(0%2C0%2C0%2C0.2)%2C0%206px%2020px%200%20rgba(0%2C0%2C0%2C0.19)%3B%0A%20%20text-align%3A%20center%3B%0A%20%20font-size%3A%2012px%3B%0A%7D%0A%0A%0A%0A%0A%0A%23Yscale%20input%7B%0A%20%20%20%20width%3A%2050px%3B%0A%20%20%20%20margin%3A%2010px%200px%3B%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3Cdiv%20id%3D%22Yscale%22%3E%0A%3Cdiv%20class%3D%22content%22%3E%0A%3Cp%3E%3Cspan%3EChange%20the%20number%20to%20scale%20the%20your%20video%3C%2Fspan%3E%20%3C%2Fp%3E%0A%3Cp%3E%3Cinput%20id%3D%22YScale-val%22%20value%3D0%20%20min%3D%221%22%20%20type%3Dnumber%20onchange%3D%22Yscale.change()%22%3E%3C%2Fp%3E%0A%3Cp%3E%3Cbutton%20onclick%3D%22Yscale.close()%22%3EClose%3C%2Fbutton%3E%3C%2Fp%3E%0A%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%60%0A%0AYscale.close%20%3D%20()%20%3D%3E%20(document.getElementById(%22Yscale%22).style.display%20%3D%20%22none%22)%0AYscale.change%20%3D%20()%20%3D%3E%20%7B%0A%20%20let%20val%20%3D%20document.getElementById(%22YScale-val%22).value%0A%20%20val%20%3D%20val.padStart(2%2C%20%220%22)%0A%20%20document.querySelector(%22video%22).style.transform%20%3D%20%60scale(1%2C1.%24%7Bval%7D)%60%0A%20%20document.querySelector(%22video%22).style.height%20%3D%20%6099%25%60%0A%7D%0A%0AYscale.init%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(!document.getElementById(%22Yscale%22))%0A%20%20%20%20document.body.insertAdjacentHTML(%22beforeend%22%2C%20Yscale.html)%0A%20%20else%20document.getElementById(%22Yscale%22).style.display%20%3D%20%22block%22%0A%7D%0A%0AYscale.init()%7D)()%3B```

Source can be found in the same gist.

Shoutout to  https://caiorss.github.io/bookmarklet-maker/ 
window.Yscale = {}
Yscale.html = `
<style>
#Yscale {
position: fixed;
z-index: 10000;
top: 40%;
left: 40%;
width: 390px;
}
#Yscale .content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
text-align: center;
font-size: 12px;
}
#Yscale input{
width: 50px;
margin: 10px 0px;
}
</style>
<div id="Yscale">
<div class="content">
<p><span>Change the number to scale the your video</span> </p>
<p><input id="YScale-val" value=0 min="1" type=number onchange="Yscale.change()"></p>
<p><button onclick="Yscale.close()">Close</button></p>
</p>
</div>
</div>
`
Yscale.close = () => (document.getElementById("Yscale").style.display = "none")
Yscale.change = () => {
let val = document.getElementById("YScale-val").value
val = val.padStart(2, "0")
document.querySelector("video").style.transform = `scale(1,1.${val})`
document.querySelector("video").style.height = `99%`
}
Yscale.init = () => {
if (!document.getElementById("Yscale"))
document.body.insertAdjacentHTML("beforeend", Yscale.html)
else document.getElementById("Yscale").style.display = "block"
}
Yscale.init()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment