☰

Resize Video To Window Size

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

目前为 2017-12-12 提交的版本。查看 最新版本。

  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         34
  7. // @include         http://www.crunchyroll.com/*
  8. // @include         https://docs.google.com/file/*
  9. // @include         https://drive.google.com/drive/*
  10. // @include         https://drive.google.com/file/*
  11. // @include         https://vimeo.com/*
  12. // @include         http://onepieceofficial.com/videos.aspx*
  13. // @include         http://www.onepieceofficial.com/videos.aspx*
  14. // @include         http://eachvideo.com/watch*
  15. // @include         http://olympics.cbc.ca/video/live/*
  16. // @include         http://olympics.cbc.ca/video/vod/*
  17. // @include         http://www.dailymotion.com/*
  18. // @include         https://www.dailymotion.com/*
  19. // @include         https://streamable.com/*
  20. // @include         https://www.globaltv.com/thelateshowwithstephencolbert/video/episode/*/video.html?v=*
  21. // @include         https://www.much.com/shows/south-park/episode/*/*/
  22. // @include         http://*.ctvnews.ca/*
  23. // @include         https://watch.cbc.ca/live/channel/*
  24. // @grant           GM_addStyle
  25. // ==/UserScript==
  26.  
  27. (function() {
  28.     var fixedOverlayPlayer = function(selector) {
  29.         var css = selector + "{";
  30.         css += "position: fixed;";
  31.         css += "top: 0;";
  32.         css += "left: 0;";
  33.         css += "right: 0;";
  34.         css += "bottom: 0;";
  35.         css += "}";
  36.         GM_addStyle(css);
  37.     };
  38.     
  39.     var absoluteTopPlayer = function(selector, staticSelectors) {
  40.         var css = selector + "{";
  41.         css += "position: absolute;";
  42.         css += "top: 0;";
  43.         css += "left: 0;";
  44.         css += "width: 100vw;";
  45.         css += "height: 100vh;";
  46.         css += "padding: 0;";
  47.         css += "margin: 0;";
  48.         css += "}";
  49.         css += "body {";
  50.         css += "margin-top: 100vh;";
  51.         css += "margin-top: 100vh;";
  52.         css += "padding-top: 0;";
  53.         css += "}";
  54.         if (staticSelectors) {
  55.             css += staticSelectors + "{";
  56.             css += "position: static";
  57.             css += "}";
  58.         }
  59.         GM_addStyle(css);
  60.     };
  61.     
  62.     var movedTopPlayer = function(videoBoxElement) {
  63.         document.body.insertBefore(videoBoxElement, document.body.firstChild);
  64.         videoBoxElement.style.width = '100%';
  65.         videoBoxElement.style.height = '100%';
  66.         videoBoxElement.style.backgroundColor = '#000';
  67.     };
  68.  
  69.     var urlMatch = function(regexStr) {
  70.         regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  71.         var regex = new RegExp(regexStr);
  72.         return regex.exec(window.location.href);
  73.     };
  74.  
  75.     if (document.location.host.endsWith('crunchyroll.com')) {
  76.         if (!window.location.href.match(/^http:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) return;
  77.         var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  78.         if (!videoBoxElement) return;
  79.         movedTopPlayer(videoBoxElement);
  80.         videoBoxElement.addEventListener('keydown', function(e) {
  81.             if (e.key == 'PageDown') {
  82.                 window.scrollBy(0, window.innerHeight * 0.9);
  83.             } else if (e.key == 'PageUp') {
  84.                 window.scrollBy(0, -window.innerHeight * 0.9);
  85.             } else if (e.key == 'ArrowDown') {
  86.                 window.scrollBy(0, 40);
  87.             } else if (e.key == 'ArrowUp') {
  88.                 window.scrollBy(0, -40);
  89.             }
  90.         }, true);
  91.         var css = 'html, body { width: 100%; height: 100%; }';
  92.         css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh + 32px) !important; }';
  93.         GM_addStyle(css);
  94.     } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  95.         fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  96.         var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
  97.         css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
  98.         GM_addStyle(css);
  99.     } else if (document.location.href.startsWith('https://drive.google.com/')) {
  100.         fixedOverlayPlayer('.drive-viewer-video-player');
  101.         var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
  102.         css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
  103.         GM_addStyle(css);
  104.     } else if (document.location.href.startsWith('https://vimeo.com/')) {
  105.         if (! /\/\d+/.exec(document.location.pathname))
  106.             return;
  107.         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; }';
  108.         css += '.vp-player-layout { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; }';
  109.         css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  110.         css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  111.         css += '.topnav_desktop { top: calc(100vh + 5px); }';
  112.         GM_addStyle(css);
  113.  
  114.         // autoplay
  115.         function tick() {
  116.             var e = document.querySelector('button.play[aria-label="Play"]');
  117.             if (e) {
  118.                 e.click();
  119.             } else {
  120.                 setTimeout(tick, 100);
  121.             }
  122.         }
  123.         setTimeout(tick, 100);
  124.     } else if (document.location.host.endsWith('onepieceofficial.com')) {
  125.         movedTopPlayer(document.querySelector('#FUNimationVideo'));
  126.     } else if (document.location.host.endsWith('eachvideo.com')) {
  127.         absoluteTopPlayer('.videoWrapper', '.navbar.navbar-default.navbar-fixed-top.bs-docs-nav, .col-md-8.row-border');
  128.     } else if (document.location.host == 'olympics.cbc.ca') {
  129.         if (document.querySelector('figure.cbc-video--thumb-wrapper.cbc-big[style="display: none;"]')) {
  130.             // Sports video
  131.             movedTopPlayer(document.querySelector('.cbc-video--player-wrapper'));
  132.             var css = 'body.asdf-16x9 .cbc-video--player-wrapper { width: 100vw !important; height: calc(27px + 100vh + 59px) !important; position: absolute; top: -27px; }';
  133.             css += 'body.asdf-16x9 .cbc-video--player-wrapper.cbc-live-or-full-evt:hover { top: calc(-27px - 59px); }';
  134.             css += 'body.asdf-16x9 { margin-top: 100vh; }';
  135.             //css += 'body.asdf-fill-height .cbc-video--player-wrapper { width: calc((100vh - 60px - 59px) * 1.777777777) !important; height: 100vh !important; margin: 0 auto; }';
  136.             //css += 'body.asdf-fill-width .cbc-video--player-wrapper { width: 100vw !important; height: calc(60px + 56.25vw + 59px) !important; }';
  137.             GM_addStyle(css);
  138.             function onResize() {
  139.                 
  140.                 var height = 59 + window.innerWidth * 0.5625 + window.innerHeight * 0.06;
  141.                 var ratio = window.innerWidth / window.innerHeight;
  142.                 console.log('onResize', height, ratio)
  143.                 
  144.                 if (1.7 <= ratio && ratio <= 1.8 ) { // 16:9 = 1.7777777...
  145.                     document.body.classList.remove('asdf-fill-width');
  146.                     document.body.classList.remove('asdf-fill-height');
  147.                     document.body.classList.add('asdf-16x9');
  148.                 } else if (height > window.innerHeight) {
  149.                     document.body.classList.remove('asdf-fill-width');
  150.                     document.body.classList.remove('asdf-16x9');
  151.                     document.body.classList.add('asdf-fill-height');
  152.                     var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  153.                     videoBoxElement.style.width = "calc((100vh - 27px - 59px) * 1.777777777)";
  154.                     videoBoxElement.style.height = "100vh";
  155.                     videoBoxElement.style.margin = '0 auto';
  156.                 } else {
  157.                     document.body.classList.remove('asdf-fill-height');
  158.                     document.body.classList.remove('asdf-16x9');
  159.                     document.body.classList.add('asdf-fill-width');
  160.                     var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  161.                     videoBoxElement.style.width = "100vw";
  162.                     videoBoxElement.style.height = "calc(27px + 56.25vw + 59px)";
  163.                 }
  164.             }
  165.             window.addEventListener('resize', onResize);
  166.             window.addEventListener('click', function(){
  167.                 setTimeout(onResize, 1000);
  168.             });
  169.             onResize();
  170.             
  171.         } else {
  172.             // Regular video
  173.             movedTopPlayer(document.querySelector('.cbc-video'));
  174.             var css = 'figure.cbc-video--thumb-wrapper.cbc-big { height: 100%; margin: 0; }';
  175.             css += 'figure.cbc-video--thumb-wrapper.cbc-big picture { width: 100%; }';
  176.             css += 'figure.cbc-video--thumb-wrapper.cbc-big picture img { width: 100%; }';
  177.             GM_addStyle(css);
  178.             function onResize() {
  179.                 var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  180.                 var height = 26 + window.innerWidth * 0.5625;
  181.                 if (height > window.innerHeight) {
  182.                     videoBoxElement.style.width = "calc((100vh - 26px) * 1.77777777)";
  183.                     videoBoxElement.style.height = "100vh";
  184.                     videoBoxElement.style.margin = '0 auto';
  185.                 } else {
  186.                     videoBoxElement.style.width = "100vw";
  187.                     videoBoxElement.style.height = "calc(26px + 56.25vw)";
  188.                 }
  189.             }
  190.             window.addEventListener('resize', onResize);
  191.             onResize();
  192.         }
  193.     } else if (document.location.host.endsWith('www.dailymotion.com')) {
  194.         var css = '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
  195.         if (document.location.pathname.startsWith('/playlist')) {
  196.             css += '#player_container { height: 100vh!important; width: 100vw!important; }';
  197.             css += '#playerv5-iframe { width: 100% !important; height: 100% !important; }'; // playlists
  198.             css += '.sd_header.sd_header--fixed { top: 100vh; position: absolute; }';
  199.             css += '#content { margin-top: 60px; }';
  200.             movedTopPlayer(document.querySelector('#player_container'));
  201.             absoluteTopPlayer('#player_container');
  202.  
  203.             GM_addStyle(css);
  204.  
  205.         } else if (document.location.pathname.startsWith('/video')) {
  206.             //css +='.main-container-player { display: none; }';
  207.             //css += '#player { height: 100vh!important; width: 100vw!important; }';
  208.             css += '.Player { height: 100vh!important; width: 100vw!important; }';
  209.             css += '.Player { top: 0!important; left: 0!important; }';
  210.             css += 'header { position: absolute!important; top: 100vh !important; }';
  211.             css += 'footer { margin-top: 50px; }';
  212.             css += 'div[class^="Video__placeholder___"] { margin-top: -180px; height: 100vh!important; }';
  213.             GM_addStyle(css);
  214.             document.addEventListener('load',function(){
  215.                 movedTopPlayer(document.querySelector('.Player'));
  216.             });
  217.         }
  218.  
  219.     } else if (document.location.host.endsWith('streamable.com')) {
  220.         if (document.location.pathname == '/') {
  221.             return;
  222.         }
  223.         var css = '#player-content, #player.container .media-container, #player.container #filler, #player.container .player { max-width: 100% !important; width:100%; }';
  224.         css += '#player.container #filler { padding-bottom: 100vh !important; }';
  225.         css += '.player { background: #000; }';
  226.         css += '.player, #player.container video { max-height: 100vh; }';
  227.         css += '#player > div[style="height:15px;"] { display: none; }';
  228.         css += '#player.container .topbanner { display: none; }';
  229.         GM_addStyle(css);
  230.     } else if (document.location.host.endsWith('globaltv.com')) {
  231.         var css = '#corusVideo_PlayerContainer { width: 100vw !important; height: 100vh !important; }';
  232.         css += '#corusVideo_PlayerContainer + .playlist { display: none; }';
  233.         css += '#corusVideo_PlayerContainer.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
  234.         GM_addStyle(css);
  235.         var videoPlayerElement = document.querySelector('#corusVideo_PlayerContainer') // corusVideo_PlayerContainer shawVideo_PlaybackArea
  236.         movedTopPlayer(videoPlayerElement);
  237.  
  238.         window.addEventListener('keydown', function(e){
  239.             if (e.key == ' ' && e.target == document.body) {
  240.                 var video = document.querySelector('.jw-video')
  241.                 if (video) {
  242.                     e.preventDefault();
  243.                     if (video.paused) {
  244.                         video.play()
  245.                     } else {
  246.                         video.pause()
  247.                     }
  248.                 }
  249.             }
  250.         });
  251.     } else if (document.location.host.endsWith('much.com')) {
  252.         var css = '#TopVideoWidgetSection, #ShowNav, #MainHeader, #MastHeadTakeover { display: none; }';
  253.         css += '#ShowTop #PlayerWrapper, #ShowTop .container-fluid, #ShowTop #ShowInfo, #ShowTop {';
  254.         css += 'margin: 0 !important; padding: 0 !important;';
  255.         css += 'width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;';
  256.         css += '}';
  257.         GM_addStyle(css);
  258.     } else if (document.location.host.endsWith('ctvnews.ca')) {
  259.         if (window.location.pathname == '/latest') {
  260.             // Redirect to latest video
  261.             document.body.style.opacity = "0"
  262.             document.documentElement.style.transition = "background 0.4s"
  263.             document.documentElement.style.background = "#000"
  264.             var latestVideoLink = document.querySelector('.mainnavigation + .drop_down + script + .drop_down > .drop_down_element_container > div > div > ul > li:first-child > a')
  265.             if (latestVideoLink) {
  266.                 window.location.href = latestVideoLink.href
  267.             }
  268.         } else if (window.location.pathname == '/video') {
  269.             var contentWrapper = document.querySelector('body > .content > .video-header > .content-wrapper')
  270.             if (contentWrapper) {
  271.                 var header = document.querySelector('body > header')
  272.                 document.body.insertBefore(contentWrapper, header)
  273.                 var mediaplayerdiv = document.querySelector('#mediaplayerdiv')
  274.  
  275.                 contentWrapper.querySelector('.topname').style.display = "none"
  276.                 contentWrapper.style.width = "100%"
  277.                 contentWrapper.style.height = "100vh"
  278.                 contentWrapper.style.maxWidth = "100vw"
  279.                 contentWrapper.style.maxHeight = "100vh"
  280.                 contentWrapper.style.background="#000"
  281.  
  282.                 function onWindowResize() {
  283.                     var viewportWidth = document.documentElement.clientWidth
  284.                     var viewportHeight = document.documentElement.clientHeight
  285.                     var translate = "translate(" + ((viewportWidth - 960)/2) + "px, " + ((viewportHeight - 540)/2) + "px)"
  286.                     var scale = "scale(" + Math.min(viewportWidth / 960, viewportHeight / 540) + ")"
  287.                     mediaplayerdiv.style.transform = translate + " " + scale
  288.                 }
  289.                 window.addEventListener('resize', onWindowResize);
  290.                 onWindowResize();
  291.                 return; // Keep scrollbars
  292.             }
  293.         } else {
  294.             return; // Keep scrollbars
  295.         }
  296.     } else if (document.location.host.endsWith('watch.cbc.ca')) {
  297.         var css = '#masthead { position: absolute; z-index: 1; width: 100%; opacity: 0; transition: opacity 250ms ease-in-out; }';
  298.         css += '#masthead:hover { opacity: 1; }';
  299.         css += '.regional-channel .container { max-width: 100%; }';
  300.         css += '.player-container.live, .jwplayer.jw-flag-aspect-mode { max-height: 100vh; }';
  301.         css += '.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
  302.         css += '.regional-channel footer.regional-channel-footer, section.content-article.live { padding: 10px 0; }';
  303.         css += 'section.content-article.live-premium { display: none; }';
  304.         GM_addStyle(css);
  305.     }
  306.  
  307.     GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
  308. })();