NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Youtube video more controls and display videos' remaining time and button to pop video on top of others.
// @description This displays the time remaining on a video and also shows a button which pops the video out when clicked and a button to show Youtube video fully in full screen mode meaning you cannot see controls, the only thing you see on the screen is the video. part of this script was developed by wormboy and I modified it.
// @version 1.0
// @author Asdf123 & wormboy
// @license MIT
// @namespace stinkrock
// @match https://www.youtube.com/*
// @run-at document-idle
// @noframes
// ==/UserScript==
// Code to add full screen and pop up icons near the YouTube's default video icons begins below.
let div = document.createElement('div');
div.classList.add('moreCtrls');
div.style.cssText = `position: absolute; top: 7px; margin: 0px -20px;`;
div.innerHTML = `
<button class="ytp-popUpCtrl-button ytp-button" style="margin: 0 0 0 -10px;"
aria-label="Converts video to full screen without showing any controlers (press ESC to escape)" aria-pressed="false"
title="Converts video to full screen without showing any controlers (press ESC to escape)"
onclick="document.getElementsByTagName('video')[0].requestPictureInPicture();">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="50%" height="50%">
<style> tspan {white-space: pre}.shp {fill: #fff} </style>
<path id="Shape 2" fill-rule="evenodd" class="shp"
d="M179 52L109 122C109 122 102.86 122.8 100 120C97.14 117.2 96 112 96 112L96 109L96 108L166 38L167 37L139 37C139 37 133.71 35.88 132 32C130.29 28.12 131 24 131 24C131 24 132.63 20.93 134 20C135.37 19.07 138 18 138 18L193 18C193 18 200.1 20.69 200 25C199.9 29.31 200 81 200 81C200 81 197.21 85.1 195 86C192.79 86.9 186.55 87.33 185 86C183.45 84.67 181 80 181 80L181 52L181 51L179 52Z">
</path>
<path id="Shape 1" fill-rule="evenodd" class="shp"
d="M100 40L7 40C7 40 3.2 42.41 2 44C0.8 45.59 0 49 0 49L0 176C0 176 3.49 181.12 6 182C8.51 182.88 12 183 12 183L169 183C169 183 172.13 182.07 174 180C175.87 177.93 177 176 177 176L177 115L175 112L173 110L169 109L165 109L161 111L159 114L158 116L158 164L19 164L19 59L101 59L105 57L106 55L107 53L107 50L107 47L106 45L105 43L104 42L102 41L100 40Z">
</path>
</svg>
</button>
<button class="ytp-fullScreenCtrl-button ytp-button" style="margin: 0 0 0 -75px;"
aria-label="Shows video in full screen convering thw whole screen without showing any control buttons (press ESC to escape)" aria-pressed="false"
title="Shows video in full screen convering thw whole screen without showing any control buttons (press ESC to escape)"
onclick="document.getElementsByTagName('video')[0].requestFullscreen();">
<svg height="45%" width="45%" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs> <style> .cls-1 {fill: #fff; fill-rule: evenodd;} </style> </defs>
<path class="cls-1"
d="M206,299v71s2.22,3.22,3,3,13,0,13,0,2.4-2.24,3-4,0-40,0-40l56,56,5,1,10-10-1-4-56-56v-1h41s3.25-2.66,3-3,0-13,0-13a4,4,0,0,0-4-3c-3.22.13-71,0-71,0A19.09,19.09,0,0,0,206,299Z"
transform="translate(-206 -296)"></path>
<path class="cls-1"
d="M403,296H332s-3.22,2.22-3,3,0,13,0,13,2.24,2.4,4,3,40,0,40,0l-56,56-1,5,10,10,4-1,56-56h1v41s2.66,3.25,3,3,13,0,13,0a4,4,0,0,0,3-4c-.13-3.22,0-71,0-71A19.82,19.82,0,0,0,403,296Z"
transform="translate(-206 -296)"></path>
<path class="cls-1"
d="M406,493V422s-2.22-3.22-3-3-13,0-13,0-2.4,2.24-3,4,0,40,0,40l-56-56-5-1-10,10,1,4,56,56v1H332s-3.25,2.66-3,3,0,13,0,13a4,4,0,0,0,4,3c3.22-.13,71,0,71,0A19.09,19.09,0,0,0,406,493Z"
transform="translate(-206 -296)"></path>
<path class="cls-1"
d="M209,496h71s3.22-2.22,3-3,0-13,0-13-2.24-2.4-4-3-40,0-40,0l56-56,1-5-10-10-4,1-56,56h-1V422s-2.66-3.25-3-3-13,0-13,0a4,4,0,0,0-3,4c.13,3.22,0,71,0,71A19.82,19.82,0,0,0,209,496Z"
transform="translate(-206 -296)"></path>
</svg>
</button>`;
document.querySelector('.ytp-right-controls').append(div);
// Done
// The code to the popup icon near the timer starts below.
const iconURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFAmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAzLTA4VDE5OjI4OjIxWiIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDMtMDhUMjA6MDc6NDBaIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAzLTA4VDIwOjA3OjQwWiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjMyMDFmOC01Y2ViLWQzNDAtYWZiZC05NTJlOGFi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";
const mainContainer = document.createElement('div');
mainContainer.classList.add('videoTools');
const container = document.createElement('div');
mainContainer.style.cssText = `
display: flex;
font-size: 1.4rem;
font-weight: 400;
line-height: 2rem;
color: white;
color: var(--ytd-video-primary-info-renderer-title-color, var(--yt-spec-text-primary));
opacity: .5;
`
const string = document.createTextNode('');
mainContainer.appendChild(container);
container.appendChild(string)
const popOut = document.createElement('div');
popOut.addEventListener('click', () => {
document.getElementsByTagName('video')[0].requestPictureInPicture();
});
popOut.classList.add('popOut');
popOut.title = "Make the video pop out on top of other windows so you can watch it while doing other things.";
/*<img style="width: 16px; margin: 0px 5px; cursor: pointer; filter: invert(.5);" src=${iconURI}>*/
popOut.innerHTML = `
<svg style="width: 16.5px; margin: 0px 5px; position: absolute;">
<defs>
<filter id="colorMask1">
<feFlood result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFAmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAzLTA4VDE5OjI4OjIxWiIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDMtMDhUMjA6MDc6NDBaIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAzLTA4VDIwOjA3OjQwWiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjMyMDFmOC01Y2ViLWQzNDAtYWZiZC05NTJlOGFiOWMzNWIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDIzMjAxZjgtNWNlYi1kMzQwLWFmYmQtOTUyZThhYjljMzViIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NDIzMjAxZjgtNWNlYi1kMzQwLWFmYmQtOTUyZThhYjljMzViIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MjMyMDFmOC01Y2ViLWQzNDAtYWZiZC05NTJlOGFiOWMzNWIiIHN0RXZ0OndoZW49IjIwMjAtMDMtMDhUMTk6Mjg6MjFaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R8he3AAABfRJREFUeNrt3VuIVAUcx/E1yZKoUDILSqILEuGDFEkhdHnJl0zQDMoUepLwwUwpohcfgkTCIrpoFzLoHphRFmT1GJmVmj5UCAV2Jcy8gWZ7+p9mJ0Z3d3Z29szMuXx+8IUuKJ7T+bizdmZOX5IkfZKGzkmQAJEAkQCRAJEAkQCRAJEAkQCRBIgEiASIBIgEiASICtrEaFY0L1pQkuZHN0VTAFG7zY42RceScu/zaHE0HhC10tnRy0n19kV0BSBq1qRoe1Ld7Y9mAqKhSl9ifJzYr9GFgOjUlrHx/94CRI1NiH7h4qTNcGGo3q08DNpaF4bqPcbDoH3pwlC9zTwM2kEXhup9xMPguTBU720cANHwrcYBEA3f9TgAouEbF+1CAhAN3xwkAFHznsACEDW/YfFFNABR8+9HlkYHAJGavzdkVfRZdBwQqflLr6nRRV1oWvQuINLgToue8xVEyjmOZIRf6A3RmuiDaFtSe5+yOlf6On9T9FB0JRz5BXJLtNsf8PV8W6LpcOQHyGkDXzEsPzsaLYQjH0DWuR5zuf7odjh6C2Sh6zDXOxJdDkdvgJwZ/ewazP3egaM3QJa49gqzS0uCY0NRTnjfwO9MVoytgKP7QPa57gqzV+HoPpC/XXeF2SdwdB+IFWdb4Rhx/YBUdy/B0XR7orWAVHdL4WiKI70dfyUg1Vz6veIFcDTF0QdIdfc8HCPiAKSi+y06vyA41vcQByAVXHpH72w4WsIBSMX2U3QdHC3jAKQiS+/eXZfUPlUEjtZx5B7I19Hraqv0ueSPRvOT2nPK++AYNY7cA1meVO+91FX+gIVu42jlDyoAERyACI7R4wBEPcfxbI5xACI4ABEc7d85AIjgAERVxLE7Gfs9Z4AIDkAEByCCI1McgAgOQNQrHM8UHAcgggMQwQGI4ABEcNT3TdKdD54ARHAAIjja694Mf+2HAYGjTDjqT2nOajsAqRaOp0uOI+2c6HhGx/A4IHCUCUe9NzM6jqsBgaNsONJmRCfGeByb058LEDjKhqPe6jEcxx/RxYDAkTWOKTk7/o1tHMfBpOHjXgGBo4w4Gs/Dw0nrz+FM/0//VY0/ByBwlBVHY9OT2uPrDjc5hvTpXaef+mMBgaPsOBo7Y+Dl053RPdHcaFqzHwNIeRoHR/YBAgccgMABByBwwAGI4ABEecOxq4o4AIEDDkDggAMQOOAApOI4noIDEMEBiOAARHAAAggcgABSfhznOe+AwAEHIHDAAUg5WwMHIBq6eXAAoqGbEP0IByAaujvgOKn0g+cWRWujF5La/WerolkD36cBUrFeg+O/Lhs4F80+MvS7aHE3oQDS+77tMI6dBcBxd3R0FMe0JToXkGr0V8VxLG3z2LYntUcdAFLy9lcYx+zonzEc4xuAlL+dFcUxPtqTwbHOAaTcra8gjrS5GR3vp4CUu5sriCPtlQyPeyog5b4Ha1vFcKTtzfC6uw2QcjczGduDJ4uGI+1YhtfdMkDK311RfxvnfEdBbx/JcisBqUYLokOjON8fRpMKeqyAqK3SB7psHOEl1/fRkqT2wJw+QACpYpOT2o2Mj0QboiejFdG1BYcBiAQIIAIEEAECiAABRIAAIkAAESCACBBABAggEiCACBBABAggAgQQAQKIAAFEgAAiQAARIIBIgEiAACJAABEggAgQQAQIIAIEEAECiAABRIAAIgECiAABRIAAIkAAESCACBBABAggAgQQAQKIBIgECCACBBABks3eix6UWqiSQMx6MUDMADEDxAwQM0DMADEDxAwQQAyQNoD0O79W8C3vJJDfnV8r+BZ1EshW59cKvhmdBHKf82sF3g/RuE4CmRwdcp6toHsg6eBt+fW/WOU8WwG3N5rYDSDjoy3OtxVoR6Jrkg6/savxb86K3nferQD7M7ox6cI7H0/9B+lXkvujg/4bWE6X/iZ+SdKltwYP9y8mRcsGXnbti45FJ6QedCD6KlrXjZdUrQKRBIgEiASIBIgEiASIBIgEiASIBIgkQCRAJEAkQCRAJEAkQKQy9S+IUgMGlCiqywAAAABJRU5ErkJggg==" filter="url(#colorMask1)" />
</svg>
<style>
filter#colorMask1 feFlood {
flood-color:var(--ytd-video-primary-info-renderer-title-color, var(--yt-spec-text-primary));
}
svg image{ cursor:pointer; }
</style>
`;
mainContainer.appendChild(popOut);
// Done
// Timer code starts from blow.
let tick = Date.now()
const interval = 1000
function update(event) {
const timestamp = Date.now()
const delta = timestamp - tick
if (delta > interval) {
tick = timestamp - (delta % interval)
draw(event)
}
}
function draw(event) {
const {
duration,
currentTime
} = event.target
string.data = isNaN(duration) ? '' : format(duration - currentTime)
}
function format(sec) {
let hours = Math.floor(sec / 3600)
let minutes = Math.floor(sec % 3600 / 60)
let seconds = Math.ceil(sec % 3600 % 60)
if (hours < 10) hours = '0' + hours
if (minutes < 10) minutes = '0' + minutes
if (seconds < 10) seconds = '0' + seconds
return `${hours}:${minutes}:${seconds}`
}
window.addEventListener('yt-player-updated', playerUpdated)
function playerUpdated(event) {
const video = event.target.querySelector('.video-stream.html5-main-video')
video.removeEventListener('timeupdate', update)
video.addEventListener('timeupdate', update)
}
window.addEventListener('yt-page-data-updated', pageDataUpdated)
function pageDataUpdated(event) {
const info = event.target.querySelector('ytd-video-primary-info-renderer #container #info')
info.parentNode.insertBefore(mainContainer, info)
}
{
const [target, video, info] = [
document.querySelector('ytd-page-manager'),
document.querySelector('ytd-page-manager .video-stream.html5-main-video'),
document.querySelector('ytd-page-manager ytd-video-primary-info-renderer #container #info')
]
if (video) playerUpdated({
target
})
if (info) pageDataUpdated({
target
})
}
// Done