☰

Resize Video To Window Size

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

当前为 2017-05-31 提交的版本，查看 最新版本。

  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         18
  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/video/*
  18. // @grant           GM_addStyle
  19. // ==/UserScript==
  20.  
  21. (function() {
  22.     var fixedOverlayPlayer = function(selector) {
  23.         var css = selector + "{";
  24.         css += "position: fixed;";
  25.         css += "top: 0;";
  26.         css += "left: 0;";
  27.         css += "right: 0;";
  28.         css += "bottom: 0;";
  29.         css += "}";
  30.         GM_addStyle(css);
  31.     };
  32.     
  33.     var absoluteTopPlayer = function(selector, staticSelectors) {
  34.         var css = selector + "{";
  35.         css += "position: absolute;";
  36.         css += "top: 0;";
  37.         css += "left: 0;";
  38.         css += "width: 100vw;";
  39.         css += "height: 100vh;";
  40.         css += "padding: 0;";
  41.         css += "margin: 0;";
  42.         css += "}";
  43.         css += "body {";
  44.         css += "margin-top: 100vh;";
  45.         css += "margin-top: 100vh;";
  46.         css += "padding-top: 0;";
  47.         css += "}";
  48.         if (staticSelectors) {
  49.             css += staticSelectors + "{";
  50.             css += "position: static";
  51.             css += "}";
  52.         }
  53.         GM_addStyle(css);
  54.     };
  55.     
  56.     var movedTopPlayer = function(videoBoxElement) {
  57.         document.body.insertBefore(videoBoxElement, document.body.firstChild);
  58.         videoBoxElement.style.width = '100%';
  59.         videoBoxElement.style.height = '100%';
  60.         videoBoxElement.style.backgroundColor = '#000';
  61.     };
  62.  
  63.     var urlMatch = function(regexStr) {
  64.         regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  65.         var regex = new RegExp(regexStr);
  66.         return regex.exec(window.location.href);
  67.     };
  68.  
  69.     if (window.location.href.match(/^http:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) {
  70.         var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  71.         if (!videoBoxElement) return;
  72.         movedTopPlayer(videoBoxElement);
  73.         var css = 'html, body { width: 100%; height: 100%; }';
  74.         css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh + 32px) !important; }';
  75.         GM_addStyle(css);
  76.     } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  77.         fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  78.         var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
  79.         css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
  80.         GM_addStyle(css);
  81.     } else if (document.location.href.startsWith('https://drive.google.com/')) {
  82.         fixedOverlayPlayer('.drive-viewer-video-player');
  83.         var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
  84.         css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
  85.         GM_addStyle(css);
  86.     } else if (document.location.href.startsWith('https://vimeo.com/')) {
  87.         debugger;
  88.         if (! /\/\d+/.exec(document.location.pathname))
  89.             return;
  90.         var css = '.player_area-wrapper, .player_area, .player_container, .player, .video-wrapper, .video, .video * { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }';
  91.         css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  92.         css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  93.         css += '.topnav_desktop { top: calc(100vh + 5px); }';
  94.         GM_addStyle(css);
  95.  
  96.         // autoplay
  97.         function tick() {
  98.             var e = document.querySelector('button.play[aria-label="Play"]');
  99.             if (e) {
  100.                 e.click();
  101.             } else {
  102.                 setTimeout(tick, 100);
  103.             }
  104.         }
  105.         setTimeout(tick, 100);
  106.     } else if (document.location.host.endsWith('onepieceofficial.com')) {
  107.         movedTopPlayer(document.querySelector('#FUNimationVideo'));
  108.     } else if (document.location.host.endsWith('eachvideo.com')) {
  109.         absoluteTopPlayer('.videoWrapper', '.navbar.navbar-default.navbar-fixed-top.bs-docs-nav, .col-md-8.row-border');
  110.     } else if (document.location.host == 'olympics.cbc.ca') {
  111.         if (document.querySelector('figure.cbc-video--thumb-wrapper.cbc-big[style="display: none;"]')) {
  112.             // Sports video
  113.             movedTopPlayer(document.querySelector('.cbc-video--player-wrapper'));
  114.             var css = 'body.asdf-16x9 .cbc-video--player-wrapper { width: 100vw !important; height: calc(27px + 100vh + 59px) !important; position: absolute; top: -27px; }';
  115.             css += 'body.asdf-16x9 .cbc-video--player-wrapper.cbc-live-or-full-evt:hover { top: calc(-27px - 59px); }';
  116.             css += 'body.asdf-16x9 { margin-top: 100vh; }';
  117.             //css += 'body.asdf-fill-height .cbc-video--player-wrapper { width: calc((100vh - 60px - 59px) * 1.777777777) !important; height: 100vh !important; margin: 0 auto; }';
  118.             //css += 'body.asdf-fill-width .cbc-video--player-wrapper { width: 100vw !important; height: calc(60px + 56.25vw + 59px) !important; }';
  119.             GM_addStyle(css);
  120.             function onResize() {
  121.                 
  122.                 var height = 59 + window.innerWidth * 0.5625 + window.innerHeight * 0.06;
  123.                 var ratio = window.innerWidth / window.innerHeight;
  124.                 console.log('onResize', height, ratio)
  125.                 
  126.                 if (1.7 <= ratio && ratio <= 1.8 ) { // 16:9 = 1.7777777...
  127.                     document.body.classList.remove('asdf-fill-width');
  128.                     document.body.classList.remove('asdf-fill-height');
  129.                     document.body.classList.add('asdf-16x9');
  130.                 } else if (height > window.innerHeight) {
  131.                     document.body.classList.remove('asdf-fill-width');
  132.                     document.body.classList.remove('asdf-16x9');
  133.                     document.body.classList.add('asdf-fill-height');
  134.                     var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  135.                     videoBoxElement.style.width = "calc((100vh - 27px - 59px) * 1.777777777)";
  136.                     videoBoxElement.style.height = "100vh";
  137.                     videoBoxElement.style.margin = '0 auto';
  138.                 } else {
  139.                     document.body.classList.remove('asdf-fill-height');
  140.                     document.body.classList.remove('asdf-16x9');
  141.                     document.body.classList.add('asdf-fill-width');
  142.                     var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  143.                     videoBoxElement.style.width = "100vw";
  144.                     videoBoxElement.style.height = "calc(27px + 56.25vw + 59px)";
  145.                 }
  146.             }
  147.             window.addEventListener('resize', onResize);
  148.             window.addEventListener('click', function(){
  149.                 setTimeout(onResize, 1000);
  150.             });
  151.             onResize();
  152.             
  153.         } else {
  154.             // Regular video
  155.             movedTopPlayer(document.querySelector('.cbc-video'));
  156.             var css = 'figure.cbc-video--thumb-wrapper.cbc-big { height: 100%; margin: 0; }';
  157.             css += 'figure.cbc-video--thumb-wrapper.cbc-big picture { width: 100%; }';
  158.             css += 'figure.cbc-video--thumb-wrapper.cbc-big picture img { width: 100%; }';
  159.             GM_addStyle(css);
  160.             function onResize() {
  161.                 var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  162.                 var height = 26 + window.innerWidth * 0.5625;
  163.                 if (height > window.innerHeight) {
  164.                     videoBoxElement.style.width = "calc((100vh - 26px) * 1.77777777)";
  165.                     videoBoxElement.style.height = "100vh";
  166.                     videoBoxElement.style.margin = '0 auto';
  167.                 } else {
  168.                     videoBoxElement.style.width = "100vw";
  169.                     videoBoxElement.style.height = "calc(26px + 56.25vw)";
  170.                 }
  171.             }
  172.             window.addEventListener('resize', onResize);
  173.             onResize();
  174.         }
  175.     } else if (document.location.host.endsWith('www.dailymotion.com')) {
  176.         movedTopPlayer(document.querySelector('#player'));
  177.         var css = '#player { height: 100vh!important; width: 100vw!important; }';
  178.         css += '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
  179.         GM_addStyle(css);
  180.     }
  181.     
  182.     GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
  183. })();