// ==UserScript==
// @name Resize YT To Window Size
// @description Moves the YouTube video to the top of the website and fill the window with the video player.
// @author Chris H (Zren / Shade)
// @icon https://youtube.com/favicon.ico
// @homepageURL https://github.com/Zren/ResizeYoutubePlayerToWindowSize/
// @namespace http://xshade.ca
// @version 114
// @include http*://*.youtube.com/*
// @include http*://youtube.com/*
// @include http*://*.youtu.be/*
// @include http*://youtu.be/*
// @grant none
// ==/UserScript==
// Github: https://github.com/Zren/ResizeYoutubePlayerToWindowSize
// GreasyFork: https://greasyfork.dpdns.org/scripts/811-resize-yt-to-window-size
// OpenUserJS.org: https://openuserjs.org/scripts/zren/Resize_YT_To_Window_Size
// Userscripts.org: http://userscripts-mirror.org/scripts/show/153699
(function (window) {
"use strict";
//--- Settings
var playerHeight = '100vh';
//--- Imported Globals
// yt
// ytcenter
// html5Patched (Youtube+)
// ytplayer
var uw = window;
//--- Already Loaded?
// GreaseMonkey loads this script twice for some reason.
if (uw.ytwp) return;
//--- Is iframe?
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
if (inIframe()) return;
//--- Utils
function isStringType(obj) { return typeof obj === 'string'; }
function isArrayType(obj) { return obj instanceof Array; }
function isObjectType(obj) { return typeof obj === 'object'; }
function isUndefined(obj) { return typeof obj === 'undefined'; }
function buildVenderPropertyDict(propertyNames, value) {
var d = {};
for (var i in propertyNames)
d[propertyNames[i]] = value;
return d;
}
function addClass(el, value) {
var classes = value.split(' ');
for (var i = 0; i < classes.length; i++) {
el.classList.add(classes[i]);
}
}
function removeClass(el, value) {
var classes = value.split(' ');
for (var i = 0; i < classes.length; i++) {
el.classList.remove(classes[i]);
}
}
function observe(selector, config, callback) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
callback(mutation);
});
});
var target = document.querySelector(selector);
if (!target) {
return null;
}
observer.observe(target, config);
return observer;
}
//--- Stylesheet
var JSStyleSheet = function(id) {
this.id = id;
this.stylesheet = '';
};
JSStyleSheet.prototype.buildRule = function(selector, styles) {
var s = "";
for (var key in styles) {
s += "\t" + key + ": " + styles[key] + ";\n";
}
return selector + " {\n" + s + "}\n";
};
JSStyleSheet.prototype.appendRule = function(selector, k, v) {
if (isArrayType(selector))
selector = selector.join(',\n');
var newStyle;
if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
var d = {};
d[k] = v;
newStyle = this.buildRule(selector, d);
} else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
newStyle = this.buildRule(selector, k);
} else {
// Invalid Arguments
console.log('Illegal arguments', arguments);
return;
}
this.stylesheet += newStyle;
};
JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
var styleElement = document.getElementById(injectedStyleId);
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = injectedStyleId;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(stylesheet));
};
JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
};
//--- History
var HistoryEvent = function() {}
HistoryEvent.listeners = []
HistoryEvent.dispatch = function(state, title, url) {
var stack = this.listeners
for (var i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, state, title, url)
}
}
HistoryEvent.onPushState = function(state, title, url) {
HistoryEvent.dispatch(state, title, url)
return HistoryEvent.origPushState.apply(window.history, arguments)
}
HistoryEvent.onReplaceState = function(state, title, url) {
HistoryEvent.dispatch(state, title, url)
return HistoryEvent.origReplaceState.apply(window.history, arguments)
}
HistoryEvent.inject = function() {
if (!HistoryEvent.injected) {
HistoryEvent.origPushState = window.history.pushState
HistoryEvent.origReplaceState = window.history.replaceState
window.history.pushState = HistoryEvent.onPushState
window.history.replaceState = HistoryEvent.onReplaceState
HistoryEvent.injected = true
}
}
HistoryEvent.timerId = 0
HistoryEvent.onTick = function() {
var currentPage = window.location.pathname + window.location.search
if (HistoryEvent.lastPage != currentPage) {
HistoryEvent.dispatch({}, document.title, window.location.href)
HistoryEvent.lastPage = currentPage
}
}
HistoryEvent.startTimer = function() {
HistoryEvent.lastPage = window.location.pathname + window.location.search
HistoryEvent.timerId = setInterval(HistoryEvent.onTick, 500)
}
HistoryEvent.stopTimer = function() {
clearInterval(HistoryEvent.timerId)
}
window.ytwpHistoryEvent = HistoryEvent
//--- Constants
var scriptShortName = 'ytwp'; // YT Window Player
var scriptStyleId = scriptShortName + '-style'; // ytwp-style
var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
var videoContainerId = 'player';
var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
//--- YTWP
var ytwp = uw.ytwp = {
scriptShortName: scriptShortName, // YT Window Player
log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
log: function() { return this.log_(console.log, arguments); },
error: function() { return this.log_(console.error, arguments); },
initialized: false,
pageReady: false,
isWatchPage: false,
};
ytwp.isWatchUrl = function (url) {
if (!url)
url = uw.location.href;
return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/)
|| url.match(/https?:\/\/(www\.)?youtube.com\/(c|channel)\/[^\/]+\/live/);
};
ytwp.enterTheaterMode = function() {
// ytwp.log('enterTheaterMode')
var watchElement = document.querySelector('ytd-watch:not([hidden])')
if (watchElement) {
if (!watchElement.hasAttribute('theater')) {
var sizeButton = watchElement.querySelector('button.ytp-size-button')
sizeButton.click()
}
watchElement.canFitTheater_ = true // When it's too small, it disables the theater mode.
} else if (watchElement = document.querySelector('#page.watch')) {
if (!watchElement.classList.contains('watch-stage-mode')) {
var sizeButton = watchElement.querySelector('button.ytp-size-button')
sizeButton.click()
}
}
}
ytwp.enterTheaterMode();
uw.addEventListener('resize', ytwp.enterTheaterMode);
ytwp.init = function() {
ytwp.log('init');
if (!ytwp.initialized) {
ytwp.isWatchPage = ytwp.isWatchUrl();
if (ytwp.isWatchPage) {
ytwp.removeSearchAutofocus();
if (!document.getElementById(scriptStyleId)) {
ytwp.event.initStyle();
}
ytwp.initScroller();
ytwp.initialized = true;
ytwp.pageReady = false;
}
}
ytwp.event.onWatchInit();
if (ytwp.isWatchPage) {
ytwp.html5PlayerFix();
}
}
ytwp.initScroller = function() {
// Register listener & Call it now.
uw.addEventListener('scroll', ytwp.onScroll, false);
uw.addEventListener('resize', ytwp.onScroll, false);
ytwp.onScroll();
}
ytwp.onScroll = function() {
var viewportHeight = document.documentElement.clientHeight;
// topOfPageClassId
if (ytwp.isWatchPage && uw.scrollY == 0) {
document.body.classList.add(topOfPageClassId);
//var player = document.getElementById('movie_player');
//if (player)
// player.focus();
} else {
document.body.classList.remove(topOfPageClassId);
}
// viewingVideoClassId
if (ytwp.isWatchPage && uw.scrollY <= viewportHeight) {
document.body.classList.add(viewingVideoClassId);
} else {
document.body.classList.remove(viewingVideoClassId);
}
}
ytwp.event = {
initStyle: function() {
ytwp.log('initStyle');
ytwp.style = new JSStyleSheet(scriptStyleId);
ytwp.event.buildStylesheet();
// Duplicate stylesheet targeting data-spf-name if enabled.
if (uw.spf) {
var temp = scriptBodyClassSelector;
scriptBodyClassSelector = 'body[data-spf-name="watch"]';
ytwp.event.buildStylesheet();
ytwp.style.appendRule('body[data-spf-name="watch"]:not(.ytwp-window-player) #masthead-positioner', {
'position': 'absolute',
'top': playerHeight + ' !important'
});
}
ytwp.style.injectIntoHeader();
},
buildStylesheet: function() {
ytwp.log('buildStylesheet');
//--- Browser Scrollbar
ytwp.style.appendRule(scriptBodyClassSelector + '::-webkit-scrollbar', {
'width': '0',
'height': '0',
});
//--- Video Player
var d;
d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
d['padding'] = '0 !important';
d['margin'] = '0 !important';
ytwp.style.appendRule([
scriptBodyClassSelector + ' #player',
scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
], d);
//
d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
// Bugfix for Firefox
// Parts of the header (search box) are hidden under the player.
// Firefox doesn't seem to be using the fixed header+guide yet.
d['float'] = 'initial';
// Skinny mode
d['left'] = 0;
d['margin-left'] = 0;
ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
// Theatre mode
ytwp.style.appendRule(scriptBodyClassSelector + ' .watch-stage-mode #player .player-api', {
'left': 'initial !important',
'margin-left': 'initial !important',
});
// Hide the cinema/wide mode button since it's useless.
//ytwp.style.appendRule(scriptBodyClassSelector + ' #movie_player .ytp-size-button', 'display', 'none');
// !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
// .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
// Also, Youtube Center resizes #player at element level.
// Don't resize if Youtube+'s html.floater is detected.
// Dont' resize if Youtube+ (Iridium/Material)'s html.iri-always-visible is detected.
ytwp.style.appendRule(
[
scriptBodyClassSelector + ' #player',
scriptBodyClassSelector + ' #player-api',
'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' #movie_player',
scriptBodyClassSelector + ' #player-mole-container',
'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' .html5-video-container',
'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' .html5-main-video',
],
{
'width': '100% !important',
'min-width': '100% !important',
'max-width': '100% !important',
'height': playerHeight + ' !important',
'min-height': playerHeight + ' !important',
'max-height': playerHeight + ' !important',
}
);
ytwp.style.appendRule(
[
scriptBodyClassSelector + ' #player',
scriptBodyClassSelector + ' .html5-main-video',
],
{
'top': '0 !important',
'right': '0 !important',
'bottom': '0 !important',
'left': '0 !important',
}
);
// Resize #player-unavailable, #player-api
// Using min/max width/height will keep
ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
// Fix video overlays
ytwp.style.appendRule([
scriptBodyClassSelector + ' .html5-video-player .ad-container-single-media-element-annotations', // Ad
scriptBodyClassSelector + ' .html5-video-player .ytp-upnext', // Autoplay Next Video
], 'top', '0');
//--- Move Video Player
ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
'position': 'absolute',
// Already top:0; left: 0;
});
ytwp.style.appendRule(scriptBodyClassSelector, { // body
'margin-top': playerHeight,
});
// Fix the top right avatar button
ytwp.style.appendRule(scriptBodyClassSelector + ' button.ytp-button.ytp-cards-button', 'top', '0');
//--- Sidebar
// Remove the transition delay as you can see it moving on page load.
d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
d['margin-top'] = '0 !important';
d['top'] = '0 !important';
ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
//--- Absolutely position the fixed header.
// Masthead
d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
ytwp.style.appendRule(scriptBodyClassSelector + '.hide-header-transition #masthead-positioner', d);
ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
'position': 'absolute',
'top': playerHeight + ' !important'
});
// Lower masthead below Youtube+'s html.floater
ytwp.style.appendRule('html.floater ' + scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
'z-index': '5',
});
// Autocomplete popup
ytwp.style.appendRule(scriptBodyClassSelector + ' .sbdd_a', {
'top': '56px',
});
ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' .sbdd_a', {
'top': 'calc(' + playerHeight + ' + 56px) !important',
'position': 'absolute !important',
});
// Guide
// When watching the video, we need to line it up with the masthead.
ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
'display': 'initial',
'position': 'absolute',
'top': '100% !important' // Masthead height
});
ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
'display': 'initial',
'margin': '0',
'position': 'initial'
});
//---
// Hide Scrollbars
ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
//--- Fix Other Possible Style Issues
ytwp.style.appendRule(scriptBodyClassSelector + ' #placeholder-player', 'display', 'none');
ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-sidebar-spacer', 'display', 'none');
ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
//--- Whitespace Leftover From Moving The Video
ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
//--- Youtube+ Compatiblity
ytwp.style.appendRule(scriptBodyClassSelector + ' #body-container', 'position', 'static');
ytwp.style.appendRule('.part_static_size:not(.content-snap-width-skinny-mode) ' + scriptBodyClassSelector + ' .watch-non-stage-mode #player-playlist', 'width', '1066px');
//--- Playlist Bar
ytwp.style.appendRule([
scriptBodyClassSelector + ' #placeholder-playlist',
scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist',
], {
'height': '540px !important',
'max-height': '540px !important',
});
d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-appbar-playlist', d);
d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
d['margin-left'] = '0';
d['top'] = 'calc(' + playerHeight + ' + 60px)';
ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist', d);
ytwp.style.appendRule(scriptBodyClassSelector + ' .playlist-videos-list', {
'max-height': '470px !important',
'height': 'initial !important',
});
//---
// Material UI
ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-scrolltop #extra-buttons', 'display', 'none !important');
// ytwp.style.appendRule('body > #player:not(.ytd-watch)', 'display', 'none');
// ytwp.style.appendRule('body.ytwp-viewing-video #content:not(app-header-layout) ytd-page-manager', 'margin-top', '0 !important');
// ytwp.style.appendRule('.ytd-watch-0 #content-separator.ytd-watch', 'margin-top', '0');
ytwp.style.appendRule('ytd-app', 'position', 'static !important');
ytwp.style.appendRule('ytd-watch #top', 'margin-top', '71px !important'); // 56px (topnav height) + 15px (margin)
ytwp.style.appendRule('ytd-watch #container', 'margin-top', '0 !important');
ytwp.style.appendRule('ytd-watch #content-separator', 'margin-top', '0 !important');
ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-app #masthead-container.ytd-app', {
'position': 'absolute',
'top': playerHeight,
});
ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-watch #masthead-positioner', {
'top': playerHeight + ' !important',
});
},
onWatchInit: function() {
ytwp.log('onWatchInit');
if (!ytwp.initialized) return;
if (ytwp.pageReady) return;
ytwp.event.addBodyClass();
ytwp.pageReady = true;
},
onDispose: function() {
ytwp.log('onDispose');
ytwp.initialized = false;
ytwp.pageReady = false;
ytwp.isWatchPage = false;
},
addBodyClass: function() {
// Insert CSS Into the body so people can style around the effects of this script.
document.body.classList.add(scriptBodyClassId);
ytwp.log('Applied ' + scriptBodyClassSelector);
},
};
ytwp.html5PlayerFix = function() {
ytwp.log('html5PlayerFix');
return;
try {
if (!uw.ytcenter // Youtube Center
&& !uw.html5Patched // Youtube+
&& (!ytwp.html5.app)
&& (uw.ytplayer && uw.ytplayer.config)
&& (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
) {
ytwp.html5.app = ytwp.html5.getPlayerInstance();
}
ytwp.html5.update();
ytwp.html5.autohideControls();
} catch (e) {
ytwp.error(e);
}
}
ytwp.fixMasthead = function() {
ytwp.log('fixMasthead');
var el = document.querySelector('#masthead-positioner-height-offset');
if (el) {
ytwp.fixMastheadElement(el);
}
}
ytwp.fixMastheadElement = function(el) {
ytwp.log('fixMastheadElement', el);
if (el.style.height) { // != ""
setTimeout(function(){
el.style.height = ""
document.querySelector('#appbar-guide-menu').style.marginTop = "";
}, 0);
}
}
JSStyleSheet.injectIntoHeader(scriptStyleId + '-focusfix', 'input#search[autofocus] { display: none; }');
ytwp.removeSearchAutofocus = function() {
var e = document.querySelector('input#search');
// ytwp.log('removeSearchAutofocus', e)
if (e) {
e.removeAttribute('autofocus')
}
}
ytwp.registerMastheadFix = function() {
ytwp.log('registerMastheadFix');
// Fix the offset when closing the Share widget (element.style.height = ~275px).
observe('#masthead-positioner-height-offset', {
attributes: true,
}, function(mutation) {
console.log(mutation.type, mutation)
if (mutation.attributeName === 'style') {
var el = mutation.target;
if (el.style.height) { // != ""
setTimeout(function(){
el.style.height = ""
document.querySelector('#appbar-guide-menu').style.marginTop = "";
}, 0);
}
}
});
}
//--- Material UI
ytwp.materialPageTransition = function() {
ytwp.log('materialPageTransition')
ytwp.init();
if (ytwp.isWatchUrl()) {
ytwp.removeSearchAutofocus();
ytwp.event.addBodyClass();
// if (!ytwp.html5.app) {
if (!ytwp.initialized) {
ytwp.log('materialPageTransition !ytwp.html5.app', ytwp.html5.app)
setTimeout(ytwp.materialPageTransition, 100);
}
var playerApi = document.querySelector('#player-api')
if (playerApi) {
playerApi.click()
}
} else {
ytwp.event.onDispose();
document.body.classList.remove(scriptBodyClassId);
}
ytwp.onScroll();
ytwp.fixMasthead();
ytwp.attemptToUpdatePlayer();
};
//--- Listeners
ytwp.registerListeners = function() {
ytwp.registerMaterialListeners();
ytwp.registerMastheadFix();
};
ytwp.registerMaterialListeners = function() {
// For Material UI
HistoryEvent.listeners.push(ytwp.materialPageTransition);
HistoryEvent.startTimer();
// HistoryEvent.inject();
// HistoryEvent.listeners.push(console.log.bind(console));
};
ytwp.main = function() {
ytwp.registerListeners();
ytwp.init();
ytwp.fixMasthead();
};
ytwp.main();
// ytwp.updatePlayerTimerId = 0;
ytwp.updatePlayerAttempts = -1;
ytwp.updatePlayerMaxAttempts = 150; // 60fps = 2.5sec
ytwp.attemptToUpdatePlayer = function() {
console.log('ytwp.attemptToUpdatePlayer')
if (0 <= ytwp.updatePlayerAttempts && ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
ytwp.updatePlayerAttempts = 0;
} else {
ytwp.updatePlayerAttempts = 0;
ytwp.attemptToUpdatePlayerTick();
}
// setTimeout(ytwp.updatePlayer, 10000); /// Just in case it's not caught
}
ytwp.attemptToUpdatePlayerTick = function() {
console.log('ytwp.attemptToUpdatePlayerTick', ytwp.updatePlayerAttempts)
if (ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
ytwp.updatePlayerAttempts += 1;
ytwp.updatePlayer();
// ytwp.updatePlayerTimerId = setTimeout(ytwp.attemptToUpdatePlayerTick, 200);
requestAnimationFrame(ytwp.attemptToUpdatePlayerTick);
}
}
ytwp.updatePlayer = function() {
ytwp.removeSearchAutofocus();
ytwp.enterTheaterMode();
}
ytwp.materialPageTransition()
setInterval(ytwp.updatePlayer, 2500);
})(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);
