Resize Video To Window Size

Resize the video player for various sites to the window size.

Versão de: 26/11/2017. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

You will need to install an extension such as Tampermonkey to install this script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name            Resize Video To Window Size
// @description     Resize the video player for various sites to the window size.
// @author          Chris H (Zren / Shade)
// @namespace       http://xshade.ca
// @version         31
// @include         http://www.crunchyroll.com/*
// @include         https://docs.google.com/file/*
// @include         https://drive.google.com/drive/*
// @include         https://drive.google.com/file/*
// @include         https://vimeo.com/*
// @include         http://onepieceofficial.com/videos.aspx*
// @include         http://www.onepieceofficial.com/videos.aspx*
// @include         http://eachvideo.com/watch*
// @include         http://olympics.cbc.ca/video/live/*
// @include         http://olympics.cbc.ca/video/vod/*
// @include         http://www.dailymotion.com/*
// @include         https://www.dailymotion.com/*
// @include         https://streamable.com/*
// @include         https://www.globaltv.com/thelateshowwithstephencolbert/video/episode/*/video.html?v=*
// @include         https://www.much.com/shows/south-park/episode/*/*/
// @include         http://*.ctvnews.ca/*
// @grant           GM_addStyle
// ==/UserScript==

(function() {
    var fixedOverlayPlayer = function(selector) {
        var css = selector + "{";
        css += "position: fixed;";
        css += "top: 0;";
        css += "left: 0;";
        css += "right: 0;";
        css += "bottom: 0;";
        css += "}";
        GM_addStyle(css);
    };
    
    var absoluteTopPlayer = function(selector, staticSelectors) {
        var css = selector + "{";
        css += "position: absolute;";
        css += "top: 0;";
        css += "left: 0;";
        css += "width: 100vw;";
        css += "height: 100vh;";
        css += "padding: 0;";
        css += "margin: 0;";
        css += "}";
        css += "body {";
        css += "margin-top: 100vh;";
        css += "margin-top: 100vh;";
        css += "padding-top: 0;";
        css += "}";
        if (staticSelectors) {
            css += staticSelectors + "{";
            css += "position: static";
            css += "}";
        }
        GM_addStyle(css);
    };
    
    var movedTopPlayer = function(videoBoxElement) {
        document.body.insertBefore(videoBoxElement, document.body.firstChild);
        videoBoxElement.style.width = '100%';
        videoBoxElement.style.height = '100%';
        videoBoxElement.style.backgroundColor = '#000';
    };

    var urlMatch = function(regexStr) {
        regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
        var regex = new RegExp(regexStr);
        return regex.exec(window.location.href);
    };

    if (document.location.host.endsWith('crunchyroll.com')) {
        if (!window.location.href.match(/^http:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) return;
        var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
        if (!videoBoxElement) return;
        movedTopPlayer(videoBoxElement);
        videoBoxElement.addEventListener('keydown', function(e) {
            if (e.key == 'PageDown') {
                window.scrollBy(0, window.innerHeight * 0.9);
            } else if (e.key == 'PageUp') {
                window.scrollBy(0, -window.innerHeight * 0.9);
            } else if (e.key == 'ArrowDown') {
                window.scrollBy(0, 40);
            } else if (e.key == 'ArrowUp') {
                window.scrollBy(0, -40);
            }
        }, true);
        var css = 'html, body { width: 100%; height: 100%; }';
        css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh + 32px) !important; }';
        GM_addStyle(css);
    } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
        fixedOverlayPlayer('#drive-viewer-video-player-object-0');
        var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
        css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
        GM_addStyle(css);
    } else if (document.location.href.startsWith('https://drive.google.com/')) {
        fixedOverlayPlayer('.drive-viewer-video-player');
        var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
        css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
        GM_addStyle(css);
    } else if (document.location.href.startsWith('https://vimeo.com/')) {
        if (! /\/\d+/.exec(document.location.pathname))
            return;
        var css = '.js-player_area-wrapper, .player_area-wrapper, .player_area, .player_container, .player, .video-wrapper, .video, .video * { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }';
        css += '.vp-player-layout { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; }';
        css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
        css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
        css += '.topnav_desktop { top: calc(100vh + 5px); }';
        GM_addStyle(css);

        // autoplay
        function tick() {
            var e = document.querySelector('button.play[aria-label="Play"]');
            if (e) {
                e.click();
            } else {
                setTimeout(tick, 100);
            }
        }
        setTimeout(tick, 100);
    } else if (document.location.host.endsWith('onepieceofficial.com')) {
        movedTopPlayer(document.querySelector('#FUNimationVideo'));
    } else if (document.location.host.endsWith('eachvideo.com')) {
        absoluteTopPlayer('.videoWrapper', '.navbar.navbar-default.navbar-fixed-top.bs-docs-nav, .col-md-8.row-border');
    } else if (document.location.host == 'olympics.cbc.ca') {
        if (document.querySelector('figure.cbc-video--thumb-wrapper.cbc-big[style="display: none;"]')) {
            // Sports video
            movedTopPlayer(document.querySelector('.cbc-video--player-wrapper'));
            var css = 'body.asdf-16x9 .cbc-video--player-wrapper { width: 100vw !important; height: calc(27px + 100vh + 59px) !important; position: absolute; top: -27px; }';
            css += 'body.asdf-16x9 .cbc-video--player-wrapper.cbc-live-or-full-evt:hover { top: calc(-27px - 59px); }';
            css += 'body.asdf-16x9 { margin-top: 100vh; }';
            //css += 'body.asdf-fill-height .cbc-video--player-wrapper { width: calc((100vh - 60px - 59px) * 1.777777777) !important; height: 100vh !important; margin: 0 auto; }';
            //css += 'body.asdf-fill-width .cbc-video--player-wrapper { width: 100vw !important; height: calc(60px + 56.25vw + 59px) !important; }';
            GM_addStyle(css);
            function onResize() {
                
                var height = 59 + window.innerWidth * 0.5625 + window.innerHeight * 0.06;
                var ratio = window.innerWidth / window.innerHeight;
                console.log('onResize', height, ratio)
                
                if (1.7 <= ratio && ratio <= 1.8 ) { // 16:9 = 1.7777777...
                    document.body.classList.remove('asdf-fill-width');
                    document.body.classList.remove('asdf-fill-height');
                    document.body.classList.add('asdf-16x9');
                } else if (height > window.innerHeight) {
                    document.body.classList.remove('asdf-fill-width');
                    document.body.classList.remove('asdf-16x9');
                    document.body.classList.add('asdf-fill-height');
                    var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
                    videoBoxElement.style.width = "calc((100vh - 27px - 59px) * 1.777777777)";
                    videoBoxElement.style.height = "100vh";
                    videoBoxElement.style.margin = '0 auto';
                } else {
                    document.body.classList.remove('asdf-fill-height');
                    document.body.classList.remove('asdf-16x9');
                    document.body.classList.add('asdf-fill-width');
                    var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
                    videoBoxElement.style.width = "100vw";
                    videoBoxElement.style.height = "calc(27px + 56.25vw + 59px)";
                }
            }
            window.addEventListener('resize', onResize);
            window.addEventListener('click', function(){
                setTimeout(onResize, 1000);
            });
            onResize();
            
        } else {
            // Regular video
            movedTopPlayer(document.querySelector('.cbc-video'));
            var css = 'figure.cbc-video--thumb-wrapper.cbc-big { height: 100%; margin: 0; }';
            css += 'figure.cbc-video--thumb-wrapper.cbc-big picture { width: 100%; }';
            css += 'figure.cbc-video--thumb-wrapper.cbc-big picture img { width: 100%; }';
            GM_addStyle(css);
            function onResize() {
                var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
                var height = 26 + window.innerWidth * 0.5625;
                if (height > window.innerHeight) {
                    videoBoxElement.style.width = "calc((100vh - 26px) * 1.77777777)";
                    videoBoxElement.style.height = "100vh";
                    videoBoxElement.style.margin = '0 auto';
                } else {
                    videoBoxElement.style.width = "100vw";
                    videoBoxElement.style.height = "calc(26px + 56.25vw)";
                }
            }
            window.addEventListener('resize', onResize);
            onResize();
        }
    } else if (document.location.host.endsWith('www.dailymotion.com')) {
        var css = '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
        if (document.location.pathname.startsWith('/playlist')) {
            css += '#player_container { height: 100vh!important; width: 100vw!important; }';
            css += '#playerv5-iframe { width: 100% !important; height: 100% !important; }'; // playlists
            css += '.sd_header.sd_header--fixed { top: 100vh; position: absolute; }';
            css += '#content { margin-top: 60px; }';
            movedTopPlayer(document.querySelector('#player_container'));
            absoluteTopPlayer('#player_container');

            GM_addStyle(css);

        } else if (document.location.pathname.startsWith('/video')) {
            //css +='.main-container-player { display: none; }';
            //css += '#player { height: 100vh!important; width: 100vw!important; }';
            css += '.Player { height: 100vh!important; width: 100vw!important; }';
            css += '.Player { top: 0!important; left: 0!important; }';
            css += 'header { position: absolute!important; top: 100vh !important; }';
            css += 'footer { margin-top: 50px; }';
            css += 'div[class^="Video__placeholder___"] { margin-top: -180px; height: 100vh!important; }';
            GM_addStyle(css);
            document.addEventListener('load',function(){
                movedTopPlayer(document.querySelector('.Player'));
            });
        }

    } else if (document.location.host.endsWith('streamable.com')) {
        if (document.location.pathname == '/') {
            return;
        }
        var css = '#player-content, #player.container .media-container, #player.container #filler, #player.container .player { max-width: 100% !important; width:100%; }';
        css += '#player.container #filler { padding-bottom: 100vh !important; }';
        css += '.player { background: #000; }';
        css += '.player, #player.container video { max-height: 100vh; }';
        css += '#player > div[style="height:15px;"] { display: none; }';
        css += '#player.container .topbanner { display: none; }';
        GM_addStyle(css);
    } else if (document.location.host.endsWith('globaltv.com')) {
        var css = '#corusVideo_PlayerContainer { width: 100vw !important; height: 100vh !important; }';
        css += '#corusVideo_PlayerContainer + .playlist { display: none; }';
        css += '#corusVideo_PlayerContainer.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
        GM_addStyle(css);
        var videoPlayerElement = document.querySelector('#corusVideo_PlayerContainer') // corusVideo_PlayerContainer shawVideo_PlaybackArea
        movedTopPlayer(videoPlayerElement);
    } else if (document.location.host.endsWith('much.com')) {
        var css = '#TopVideoWidgetSection, #ShowNav, #MainHeader, #MastHeadTakeover { display: none; }';
        css += '#ShowTop #PlayerWrapper, #ShowTop .container-fluid, #ShowTop #ShowInfo, #ShowTop {';
        css += 'margin: 0 !important; padding: 0 !important;';
        css += 'width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;';
        css += '}';
        GM_addStyle(css);
    } else if (document.location.host.endsWith('ctvnews.ca')) {
        if (window.location.pathname == '/latest') {
            // Redirect to latest video
            document.body.style.opacity = "0"
            document.documentElement.style.transition = "background 0.4s"
            document.documentElement.style.background = "#000"
            var latestVideoLink = document.querySelector('.mainnavigation + .drop_down + script + .drop_down > .drop_down_element_container > div > div > ul > li:first-child > a')
            if (latestVideoLink) {
                window.location.href = latestVideoLink.href
            }
        } else if (window.location.pathname == '/video') {
            var contentWrapper = document.querySelector('body > .content > .video-header > .content-wrapper')
            if (contentWrapper) {
                var header = document.querySelector('body > header')
                document.body.insertBefore(contentWrapper, header)
                var mediaplayerdiv = document.querySelector('#mediaplayerdiv')

                contentWrapper.querySelector('.topname').style.display = "none"
                contentWrapper.style.width = "100%"
                contentWrapper.style.height = "100vh"
                contentWrapper.style.maxWidth = "100vw"
                contentWrapper.style.maxHeight = "100vh"
                contentWrapper.style.background="#000"

                function onWindowResize() {
                    var viewportWidth = document.documentElement.clientWidth
                    var viewportHeight = document.documentElement.clientHeight
                    var translate = "translate(" + ((viewportWidth - 960)/2) + "px, " + ((viewportHeight - 540)/2) + "px)"
                    var scale = "scale(" + Math.min(viewportWidth / 960, viewportHeight / 540) + ")"
                    mediaplayerdiv.style.transform = translate + " " + scale
                }
                window.addEventListener('resize', onWindowResize);
                onWindowResize();
                return; // Keep scrollbars
            }
        } else {
            return; // Keep scrollbars
        }
    }

    GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
})();