使用JavaScript動態更改YouTube播放器大小？

Question

我希望YouTube完全填充我的瀏覽器窗口，而不刪除評論/播放列表/不管。

無論何時調整窗口大小，我都會完成以下腳本，完美地工作（忽略稍後修復的一些細節）。當頁面被加載時或者當我使用最大化按鈕時，它不會（完全）工作。我怎樣才能使它也適用於這兩種情況？

我注意到YouTube上還有一些其他腳本動態地改變了<video>標籤的樣式，我可以刪除該腳本或確保腳本在該腳本之後運行？

的（用戶）腳本：

// ==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); 

這是醜陋的，但它是僅用於個人使用...

PS：請不要提出任何jQuery的東西，它並不需要/期望。
PPS：它只需要在Google Chrome上運行。

Answer 1

在這裏找到了解決辦法：
Detect element style change in chrome

這似乎是通過任何類型的調整的可靠。