Y scale video

Readme.md

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/ 

src.js

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