☰

Resize Video To Window Size

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

目前为 2020-08-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Resize Video To Window Size
  3. // @description     Resize the video player for various sites to the window size.
  4. // @author          Chris H (Zren / Shade)
  5. // @namespace       http://xshade.ca
  6. // @version         55
  7. // @include         https://www.crunchyroll.com/*
  8. // @include         https://static.crunchyroll.com/vilos-v2/web/vilos/player.html
  9. // @include         https://docs.google.com/file/*
  10. // @include         https://drive.google.com/drive/*
  11. // @include         https://drive.google.com/file/*
  12. // @include         https://vimeo.com/*
  13. // @include         http://onepieceofficial.com/videos.aspx*
  14. // @include         http://www.onepieceofficial.com/videos.aspx*
  15. // @include         https://www.youpak.com/watch*
  16. // @include         https://olympics.cbc.ca/video/*
  17. // @include         https://olympics.cbc.ca/divaPlayer/*
  18. // @include         http://www.dailymotion.com/*
  19. // @include         https://www.dailymotion.com/*
  20. // @include         https://streamable.com/*
  21. // @include         https://www.globaltv.com/shows/*
  22. // @include         https://watch.globaltv.com/video/*
  23. // @include         https://www.much.com/shows/south-park/episode/*/*/
  24. // @include         http://*.ctvnews.ca/*
  25. // @include         https://watch.cbc.ca/live/channel/*
  26. // @include         https://watch.cbc.ca/live/*
  27. // @include         https://www.ctv.ca/shows/*
  28. // @include         https://www.ctv.ca/video/*
  29. // @include         https://www.ctv.ca/*/Video*
  30. // @include         https://www.ctv.ca/Movie/*
  31. // @include         https://www.funimation.com/shows/*
  32. // @include         https://www.crave.ca/*
  33. // @include         https://tubitv.com/*
  34. // @grant           GM_addStyle
  35. // ==/UserScript==
  36.  
  37. (function() {
  38.     var fixedOverlayPlayer = function(selector) {
  39.         var css = selector + "{";
  40.         css += "position: fixed;";
  41.         css += "top: 0;";
  42.         css += "left: 0;";
  43.         css += "right: 0;";
  44.         css += "bottom: 0;";
  45.         css += "}";
  46.         GM_addStyle(css);
  47.     };
  48.  
  49.     var absoluteTopPlayer = function(selector, staticSelectors) {
  50.         var css = selector + "{";
  51.         css += "position: absolute;";
  52.         css += "top: 0;";
  53.         css += "left: 0;";
  54.         css += "width: 100vw;";
  55.         css += "height: 100vh;";
  56.         css += "padding: 0;";
  57.         css += "margin: 0;";
  58.         css += "}";
  59.         css += "body {";
  60.         css += "margin-top: 100vh;";
  61.         css += "margin-top: 100vh;";
  62.         css += "padding-top: 0;";
  63.         css += "}";
  64.         if (staticSelectors) {
  65.             css += staticSelectors + "{";
  66.             css += "position: static";
  67.             css += "}";
  68.         }
  69.         GM_addStyle(css);
  70.     };
  71.  
  72.     var movedTopPlayer = function(videoBoxElement) {
  73.         document.body.insertBefore(videoBoxElement, document.body.firstChild);
  74.         videoBoxElement.style.width = '100%';
  75.         videoBoxElement.style.height = '100%';
  76.         videoBoxElement.style.backgroundColor = '#000';
  77.     };
  78.  
  79.     var waitFor = function(selector, callback) {
  80.         var tick = function(){
  81.             var e = document.querySelector(selector);
  82.             if (e) {
  83.                 callback(e);
  84.             } else {
  85.                 setTimeout(tick, 100);
  86.             }
  87.         };
  88.         tick();
  89.     };
  90.  
  91.     var bindJWPlayerSpacebar = function() {
  92.         window.addEventListener('keydown', function(e){
  93.             if (e.key == ' ' && e.target == document.body) {
  94.                 var video = document.querySelector('.jwplayer video')
  95.                 if (video) {
  96.                     e.preventDefault();
  97.                     if (video.paused) {
  98.                         video.play()
  99.                     } else {
  100.                         video.pause()
  101.                     }
  102.                 }
  103.             }
  104.         });
  105.     };
  106.  
  107.     var urlMatch = function(regexStr) {
  108.         regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  109.         var regex = new RegExp(regexStr);
  110.         return regex.exec(window.location.href);
  111.     };
  112.  
  113.     if (document.location.host.endsWith('crunchyroll.com')) {
  114.         if (window.location.href == 'https://static.crunchyroll.com/vilos-v2/web/vilos/player.html') {
  115.             GM_addStyle('#vilosRoot { height: 100vh !important; }');
  116.         } else if (window.location.href.match(/^https:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) {
  117.             var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  118.             if (!videoBoxElement) return;
  119.             movedTopPlayer(videoBoxElement);
  120.             videoBoxElement.addEventListener('keydown', function(e) {
  121.                 if (e.key == 'PageDown') {
  122.                     window.scrollBy(0, window.innerHeight * 0.9);
  123.                 } else if (e.key == 'PageUp') {
  124.                     window.scrollBy(0, -window.innerHeight * 0.9);
  125.                 } else if (e.key == 'ArrowDown') {
  126.                     window.scrollBy(0, 40);
  127.                 } else if (e.key == 'ArrowUp') {
  128.                     window.scrollBy(0, -40);
  129.                 }
  130.             }, true);
  131.             var videoObject = videoBoxElement.querySelector('object');
  132.             if (videoObject) {
  133.                 videoObject.focus();
  134.             }
  135.             var css = 'html, body { width: 100%; height: 100%; }';
  136.             css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh) !important; }';
  137.             css += '.html5-video-player { width: 100% !important; height: calc(100vh) !important; }'; // https://github.com/YePpHa/crunchyroll-html5
  138.             GM_addStyle(css);
  139.         }
  140.     } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  141.         fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  142.         var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
  143.         css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
  144.         GM_addStyle(css);
  145.     } else if (document.location.href.startsWith('https://drive.google.com/')) {
  146.         fixedOverlayPlayer('.drive-viewer-video-player');
  147.         var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
  148.         css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
  149.         GM_addStyle(css);
  150.     } else if (document.location.href.startsWith('https://vimeo.com/')) {
  151.         if (! /\/\d+/.exec(document.location.pathname))
  152.             return;
  153.         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; }';
  154.         css += '.vp-player-layout { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; }';
  155.         css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  156.         css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  157.         css += '.topnav_desktop { top: calc(100vh + 5px); }';
  158.         GM_addStyle(css);
  159.  
  160.         // autoplay
  161.         function tick() {
  162.             var e = document.querySelector('button.play[aria-label="Play"]');
  163.             if (e) {
  164.                 e.click();
  165.             } else {
  166.                 setTimeout(tick, 100);
  167.             }
  168.         }
  169.         setTimeout(tick, 100);
  170.     } else if (document.location.host.endsWith('onepieceofficial.com')) {
  171.         movedTopPlayer(document.querySelector('#FUNimationVideo'));
  172.     } else if (document.location.host.endsWith('youpak.com')) {
  173.         movedTopPlayer(document.querySelector('.videoWrapper'))
  174.         var css = 'body > .container { padding-top: 60px; }'
  175.         css += '.navbar-fixed-top { position: absolute; top: 100vh; }'
  176.         css += 'body { padding-top: 0; }'
  177.         GM_addStyle(css)
  178.     } else if (document.location.host == 'olympics.cbc.ca') {
  179.         console.log(document.location.pathname, document.location.pathname.match(/\/video\/([^\/]+)\/([^\/]+)(\/?)/))
  180.         if (document.location.pathname.match(/\/video\/([^\/]+)\/([^\/]+)(\/?)/)) {
  181.             var css = '.cbc-video--player-wrapper { position: static !important; }'
  182.             css += '.cbc-video {'
  183.             css += '    position: absolute !important;'
  184.             css += '    top: 0 !important;'
  185.             css += '    left: 0 !important;'
  186.             css += '    padding: 0px !important;'
  187.             css += '    margin: 0px !important;'
  188.             css += '    width: 100% !important;'
  189.             css += '    height: 100vh !important;'
  190.             css += '}'
  191.             css += 'figure.cbc-video--thumb-wrapper, a[data-js-hook="play-video"] picture img { max-height: 100vh !important; }'
  192.             css += '.or-podium .or-box { position: static !important; }'
  193.             css += '.or-podium .col-xs-1, .or-podium .col-sm-1, .or-podium .col-md-1, .or-podium .col-lg-1, .or-podium .col-xs-2, .or-podium .col-sm-2, .or-podium .col-md-2, .or-podium .col-lg-2, .or-podium .col-xs-3, .or-podium .col-sm-3, .or-podium .col-md-3, .or-podium .col-lg-3, .or-podium .col-xs-4, .or-podium .col-sm-4, .or-podium .col-md-4, .or-podium .col-lg-4, .or-podium .col-xs-5, .or-podium .col-sm-5, .or-podium .col-md-5, .or-podium .col-lg-5, .or-podium .col-xs-6, .or-podium .col-sm-6, .or-podium .col-md-6, .or-podium .col-lg-6, .or-podium .col-xs-7, .or-podium .col-sm-7, .or-podium .col-md-7, .or-podium .col-lg-7, .or-podium .col-xs-8, .or-podium .col-sm-8, .or-podium .col-md-8, .or-podium .col-lg-8, .or-podium .col-xs-9, .or-podium .col-sm-9, .or-podium .col-md-9, .or-podium .col-lg-9, .or-podium .col-xs-10, .or-podium .col-sm-10, .or-podium .col-md-10, .or-podium .col-lg-10, .or-podium .col-xs-11, .or-podium .col-sm-11, .or-podium .col-md-11, .or-podium .col-lg-11, .or-podium .col-xs-12, .or-podium .col-sm-12, .or-podium .col-md-12, .or-podium .col-lg-12 { position: static; }'
  194.             css += 'body:not(.cbc-main-page) { padding-top: 100vh; }'
  195.             GM_addStyle(css);
  196.             var playVideoButton = document.querySelector('a[data-js-hook="play-video"]')
  197.             if (playVideoButton) {
  198.                 playVideoButton.click()
  199.             }
  200.         } else if (document.location.pathname.startsWith('/divaPlayer')) {
  201.             var css = '#videoContainer:not(:hover) > .caption { opacity: 0; }'
  202.             css += '#videoContainer:not(:hover) .controlbar-diva { opacity: 0 !important; }'
  203.             css += '#videoContainer:not(:hover) #icon-menu-diva { opacity: 0; }'
  204.             css += '#videoContainer:not(:hover) diva-simple-controls { opacity: 0 !important; }'
  205.             GM_addStyle(css);
  206.         } else {
  207.             return; // Keep scrollbars
  208.         }
  209.     } else if (document.location.host.endsWith('www.dailymotion.com')) {
  210.         var css = '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
  211.         if (document.location.pathname.startsWith('/playlist')) {
  212.             css += '#player_container { height: 100vh!important; width: 100vw!important; }';
  213.             css += '#playerv5-iframe { width: 100% !important; height: 100% !important; }'; // playlists
  214.             css += '.sd_header.sd_header--fixed { top: 100vh; position: absolute; }';
  215.             css += '#content { margin-top: 60px; }';
  216.             movedTopPlayer(document.querySelector('#player_container'));
  217.             absoluteTopPlayer('#player_container');
  218.  
  219.             GM_addStyle(css);
  220.  
  221.         } else if (document.location.pathname.startsWith('/video')) {
  222.             //css +='.main-container-player { display: none; }';
  223.             //css += '#player { height: 100vh!important; width: 100vw!important; }';
  224.             css += '.Player { height: 100vh!important; width: 100vw!important; }';
  225.             css += '.Player { top: 0!important; left: 0!important; }';
  226.             css += 'header { position: absolute!important; top: 100vh !important; }';
  227.             css += 'footer { margin-top: 50px; }';
  228.             css += 'div[class^="Video__placeholder___"] { margin-top: -180px; height: 100vh!important; }';
  229.             GM_addStyle(css);
  230.             document.addEventListener('load',function(){
  231.                 movedTopPlayer(document.querySelector('.Player'));
  232.             });
  233.         }
  234.  
  235.     } else if (document.location.host.endsWith('streamable.com')) {
  236.         if (document.location.pathname == '/') {
  237.             return;
  238.         }
  239.         var css = '#player-content, #player.container .media-container, #player.container #filler, #player.container .player { max-width: 100% !important; width:100%; }';
  240.         css += '#player.container #filler { padding-bottom: 100vh !important; }';
  241.         css += '.player { background: #000; }';
  242.         css += '#player.container .player { display: flex; }';
  243.         css += '.player, #player.container video { max-height: 100vh; }';
  244.         css += '#player > div[style="height:15px;"] { display: none; }';
  245.         css += '#player.container .topbanner { display: none; }';
  246.         GM_addStyle(css);
  247.     } else if (document.location.host.endsWith('globaltv.com')) {
  248.         var css = 'html, body, #root, .App, .Video {'
  249.         css += 'min-height: 100%; height: 100%; max-height: 100%;'
  250.         css += 'min-width: 100%; width: 100%; max-width: 100%;'
  251.         css += '}'
  252.         css += 'body { overflow-y: auto; }'
  253.         GM_addStyle(css);
  254.         waitFor('.jwplayer', function(jwPlayerElement) {
  255.             waitFor('.jwplayer video', function(videoElement) {
  256.                 setTimeout(function() {
  257.                     videoElement.muted = false;
  258.                 }, 200)
  259.             });
  260.         });
  261.         bindJWPlayerSpacebar();
  262.     } else if (document.location.host.endsWith('much.com')) {
  263.         var css = '#TopVideoWidgetSection, #ShowNav, #MainHeader, #MastHeadTakeover { display: none; }';
  264.         css += '#ShowTop #PlayerWrapper, #ShowTop .container-fluid, #ShowTop #ShowInfo, #ShowTop {';
  265.         css += 'margin: 0 !important; padding: 0 !important;';
  266.         css += 'width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;';
  267.         css += '}';
  268.         css += '#ShowTop #ShowInfo #EpisodeInfo { margin-top: 0 !important; }';
  269.         css += '.jwplayer { max-height: 100vh; }';
  270.         css += '#EpisodeInfo .new-episodes { display: none !important; }';
  271.         GM_addStyle(css);
  272.     } else if (document.location.host.endsWith('ctvnews.ca')) {
  273.         if (window.location.pathname == '/latest') {
  274.             // Redirect to latest video
  275.             document.body.style.opacity = "0"
  276.             document.documentElement.style.transition = "background 0.4s"
  277.             document.documentElement.style.background = "#000"
  278.             var latestVideoLink = document.querySelector('.mainnavigation + .drop_down + script + .drop_down > .drop_down_element_container > div > div > ul > li:first-child > a')
  279.             if (latestVideoLink) {
  280.                 window.location.href = latestVideoLink.href
  281.             }
  282.         } else if (window.location.pathname == '/video') {
  283.             var contentWrapper = document.querySelector('body > .content > .video-header > .content-wrapper')
  284.             if (contentWrapper) {
  285.                 var header = document.querySelector('body > header')
  286.                 document.body.insertBefore(contentWrapper, header)
  287.                 var mediaplayerdiv = document.querySelector('#mediaplayerdiv')
  288.  
  289.                 contentWrapper.querySelector('.topname').style.display = "none"
  290.                 contentWrapper.style.width = "100%"
  291.                 contentWrapper.style.height = "100vh"
  292.                 contentWrapper.style.maxWidth = "100vw"
  293.                 contentWrapper.style.maxHeight = "100vh"
  294.                 contentWrapper.style.background="#000"
  295.  
  296.                 function onWindowResize() {
  297.                     var viewportWidth = document.documentElement.clientWidth
  298.                     var viewportHeight = document.documentElement.clientHeight
  299.                     var translate = "translate(" + ((viewportWidth - 960)/2) + "px, " + ((viewportHeight - 540)/2) + "px)"
  300.                     var scale = "scale(" + Math.min(viewportWidth / 960, viewportHeight / 540) + ")"
  301.                     mediaplayerdiv.style.transform = translate + " " + scale
  302.                 }
  303.                 window.addEventListener('resize', onWindowResize);
  304.                 onWindowResize();
  305.                 return; // Keep scrollbars
  306.             }
  307.         } else {
  308.             return; // Keep scrollbars
  309.         }
  310.     } else if (document.location.host.endsWith('watch.cbc.ca')) {
  311.         var css = '#masthead { position: absolute; z-index: 1; width: 100%; opacity: 0; transition: opacity 250ms ease-in-out; }';
  312.         css += '#masthead:hover { opacity: 1; }';
  313.         css += '.regional-channel .container { max-width: 100%; }';
  314.         css += '.player-container.live, .jwplayer.jw-flag-aspect-mode { max-height: 100vh; }';
  315.         css += '.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
  316.         css += '.regional-channel footer.regional-channel-footer, section.content-article.live { padding: 10px 0; }';
  317.         css += 'section.content-article.live-premium { display: none; }';
  318.         css += '.upgrade-banner, .live-premium, iframe.zEWidget-launcher { display: none; }';
  319.         css += '.upgrade-banner + .app-container.with-banner-large { top: 0; }';
  320.         css += '.content-article { padding-top: 0; padding-bottom: 0; }';
  321.         css += '.content-section.live-detail-layout { max-width: 100%; }';
  322.         GM_addStyle(css);
  323.     } else if (document.location.host.endsWith('www.ctv.ca')) {
  324.         var css = ''
  325.         css += 'header.navigation { opacity: 0; position: fixed; }'
  326.         css += 'header.navigation:hover { opacity: 1; }'
  327.         css += '.main { padding-top: 0 !important; }'
  328.         css += '#vidi-player-standalone { margin: 0vw 0vw 0; }'
  329.         css += '.jwplayer.jw-flag-aspect-mode { min-height: 100vh !important; height: 100vh !important; max-height: 100vh !important; }'
  330.         GM_addStyle(css);
  331.         waitFor('.jwplayer', function(jwPlayerElement) {
  332.             waitFor('.jwplayer video', function(videoElement) {
  333.                 setTimeout(function() {
  334.                     videoElement.muted = false;
  335.                 }, 200)
  336.             });
  337.         });
  338.         bindJWPlayerSpacebar();
  339.         var reverseEpisodeOrder = [
  340.             '/shows/the-daily-show-with-trevor-noah',
  341.         ]
  342.         waitFor('ul.episodes__list', function(ul) {
  343.             if (reverseEpisodeOrder.indexOf(document.location.pathname) >= 0) {
  344.                 for (var i = 0; i < ul.children.length; i++) {
  345.                     ul.insertBefore(ul.children[i], ul.firstChild)
  346.                 }
  347.             }
  348.         });
  349.     } else if (document.location.host.endsWith('funimation.com')) {
  350.         var videoBoxElement = document.querySelector('.video-player-section .video-player-container');
  351.         if (!videoBoxElement) return;
  352.         movedTopPlayer(videoBoxElement);
  353.         videoBoxElement.classList.remove('col-md-10');
  354.         var css = 'html, body { width: 100%; height: 100%; }';
  355.         css += '.video-player-container { width: 100vw !important; height: 100vh !important; }';
  356.         css += '#funimation-main-site-header { position: absolute; top: 100vh; }';
  357.         GM_addStyle(css);
  358.     } else if (document.location.host.endsWith('crave.ca')) {
  359.         if (document.location.pathname.startsWith('/live')) return;
  360.         var videoBoxElement = document.querySelector('video-player');
  361.         if (!videoBoxElement) return;
  362.         var css = 'footer, .back-button-wrapper, #mega-menu { display: none !important; }';
  363.         css += '.container-site-margin { margin-left: 0; margin-right: 0; }';
  364.         css += '.web-videoplayer { margin: 0; }';
  365.         css += 'html .jwplayer.jw-flag-aspect-mode { height: 100vh !important; }';
  366.         GM_addStyle(css);
  367.     } else if (document.location.host.endsWith('tubitv.com')) {
  368.         var css = 'header { transition: transform .3s, opacity .3s !important; }';
  369.         css += 'header.hide-header { opacity: 0 !important }';
  370.         css += 'header.hide-header:hover { opacity: 1 !important; }';
  371.         css += 'header + div > div:first-child > div:first-child > div:nth-child(2) { top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; }';
  372.         css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section { padding-top: 0 !important; height: 100vh !important; }';
  373.         css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section > div > div:nth-child(2) > div:first-child { background-image: linear-gradient(0deg,rgba(0,0,0,0), rgba(0,0,0,0.25) 30%, rgba(0, 0, 0, 1) 90%); }';
  374.         css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section > div > div:nth-child(2) > div:nth-child(2) { background-image: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.25) 30%, rgba(0, 0, 0, 1) 90%); }';
  375.         css += '#captionsComponent > span { background: none !important; font-size: 3rem !important;';
  376.         css += 'text-shadow: 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000;';
  377.         css += '}';
  378.         GM_addStyle(css);
  379.         var updateHeader = function() {
  380.             var header = document.querySelector('header')
  381.             if (header) {
  382.                 var video = document.querySelector('video')
  383.                 if (video) {
  384.                     header.classList.add('hide-header')
  385.                 } else {
  386.                     header.classList.remove('hide-header')
  387.                 }
  388.             }
  389.         }
  390.         updateHeader()
  391.         setInterval(updateHeader, 1000)
  392.     }
  393.  
  394.     GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
  395.     GM_addStyle('html { scrollbar-width: none; } body { scrollbar-width: none; }');
  396. })();