0

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.

0

1 Answer 1

0

Found the solution here:
Detect element style change in chrome

It seems to be reliable through any type of resizing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.