使用 JavaScript 动态更改 YouTube 播放器大小？答案

【问题标题】：Dynamically change YouTube player size with JavaScript?使用 JavaScript 动态更改 YouTube 播放器大小？
【发布时间】：2015-02-08 13:12:36
【问题描述】：

我希望 YouTube 完全填满我的浏览器窗口，而不删除 cmets/playlists/whatever。

每当我调整窗口大小时，我制作的以下脚本都能完美运行（忽略一些我稍后会修复的细节）。当页面加载或我使用最大化按钮时，它不会（完全）工作。我怎样才能让它在这两种情况下也能正常工作？

我注意到 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：它只需要在谷歌浏览器上运行。

【问题讨论】：

标签： javascript google-chrome dynamic youtube userscripts

【解决方案1】：

在这里找到解决方案：
Detect element style change in chrome

通过任何类型的调整大小似乎都是可靠的。

【讨论】：