Resize Video To Window Size

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

Устаревшая версия за 26.11.2017. Перейдите к последней версии.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

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

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

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