I want YouTube to fill my browser window completely, without removing the comments/playlists/whatever.
I made the following script that works perfectly (ignoring some details I'll fix later) whenever I resize the window. It doesn't (fully) work when the page gets loaded or when I use the maximize button. How can I make it also work in those 2 situations?
I noticed there's some other script on YouTube that changes the style of the <video>
tag dynamically, can I remove that script or make sure my script runs after that one?
The (user)script:
// ==UserScript==
// @name My Fancy New Userscript
// @namespace http://your.homepage/
// @version 0.1
// @description enter something useful
// @author You
// @match http://www.youtube.com/*
// @match https://www.youtube.com/*
// @match http://youtube.com/*
// @match https://youtube.com/*
// @grant none
// @run-at document-start
// ==/UserScript==
var addEvent = function(elem, type, eventHandle) {
if (elem == null || typeof(elem) == 'undefined') return;
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
} else {
elem["on"+type]=eventHandle;
}
};
var resizer = function() {
var clientWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || window.innerHeight || document.body.clientHeight;
var player = document.getElementById("player");
var playerAPI = document.getElementById("player-api-legacy") || document.getElementById("player-api");
var videoContainer = player;
var html5container = document.getElementsByTagName("video");
console.log(html5container);
html5container[0].style.width = 100 + "%";
html5container[0].style.height = 100 + "%";
player.removeAttribute("class");
playerAPI.style.width = clientWidth + "px";
playerAPI.style.height = clientHeight + "px";
}
addEvent(window, "load", resizer);
addEvent(window, "resize", resizer);
It's ugly, but it's for personal use only...
PS: Please don't suggest any jQuery stuff, it's not needed/desired.
PPS: It only needs to run on Google Chrome.
Found the solution here:
Detect element style change in chrome
It seems to be reliable through any type of resizing.