Resize Video To Window Size

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

当前为 2017-10-20 提交的版本,查看 最新版本

  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 29
  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. // @grant GM_addStyle
  23. // ==/UserScript==
  24.  
  25. (function() {
  26. var fixedOverlayPlayer = function(selector) {
  27. var css = selector + "{";
  28. css += "position: fixed;";
  29. css += "top: 0;";
  30. css += "left: 0;";
  31. css += "right: 0;";
  32. css += "bottom: 0;";
  33. css += "}";
  34. GM_addStyle(css);
  35. };
  36. var absoluteTopPlayer = function(selector, staticSelectors) {
  37. var css = selector + "{";
  38. css += "position: absolute;";
  39. css += "top: 0;";
  40. css += "left: 0;";
  41. css += "width: 100vw;";
  42. css += "height: 100vh;";
  43. css += "padding: 0;";
  44. css += "margin: 0;";
  45. css += "}";
  46. css += "body {";
  47. css += "margin-top: 100vh;";
  48. css += "margin-top: 100vh;";
  49. css += "padding-top: 0;";
  50. css += "}";
  51. if (staticSelectors) {
  52. css += staticSelectors + "{";
  53. css += "position: static";
  54. css += "}";
  55. }
  56. GM_addStyle(css);
  57. };
  58. var movedTopPlayer = function(videoBoxElement) {
  59. console.log('document.body', document.body, document.body.firstChild)
  60. console.log('videoBoxElement', videoBoxElement)
  61. document.body.insertBefore(videoBoxElement, document.body.firstChild);
  62. videoBoxElement.style.width = '100%';
  63. videoBoxElement.style.height = '100%';
  64. videoBoxElement.style.backgroundColor = '#000';
  65. };
  66.  
  67. var urlMatch = function(regexStr) {
  68. regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  69. var regex = new RegExp(regexStr);
  70. return regex.exec(window.location.href);
  71. };
  72.  
  73. if (window.location.href.match(/^http:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) {
  74. var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  75. if (!videoBoxElement) return;
  76. movedTopPlayer(videoBoxElement);
  77. var css = 'html, body { width: 100%; height: 100%; }';
  78. css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh + 32px) !important; }';
  79. GM_addStyle(css);
  80. } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  81. fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  82. var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
  83. css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
  84. GM_addStyle(css);
  85. } else if (document.location.href.startsWith('https://drive.google.com/')) {
  86. fixedOverlayPlayer('.drive-viewer-video-player');
  87. var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
  88. css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
  89. GM_addStyle(css);
  90. } else if (document.location.href.startsWith('https://vimeo.com/')) {
  91. if (! /\/\d+/.exec(document.location.pathname))
  92. return;
  93. 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; }';
  94. css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  95. css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  96. css += '.topnav_desktop { top: calc(100vh + 5px); }';
  97. GM_addStyle(css);
  98.  
  99. // autoplay
  100. function tick() {
  101. var e = document.querySelector('button.play[aria-label="Play"]');
  102. if (e) {
  103. e.click();
  104. } else {
  105. setTimeout(tick, 100);
  106. }
  107. }
  108. setTimeout(tick, 100);
  109. } else if (document.location.host.endsWith('onepieceofficial.com')) {
  110. movedTopPlayer(document.querySelector('#FUNimationVideo'));
  111. } else if (document.location.host.endsWith('eachvideo.com')) {
  112. absoluteTopPlayer('.videoWrapper', '.navbar.navbar-default.navbar-fixed-top.bs-docs-nav, .col-md-8.row-border');
  113. } else if (document.location.host == 'olympics.cbc.ca') {
  114. if (document.querySelector('figure.cbc-video--thumb-wrapper.cbc-big[style="display: none;"]')) {
  115. // Sports video
  116. movedTopPlayer(document.querySelector('.cbc-video--player-wrapper'));
  117. var css = 'body.asdf-16x9 .cbc-video--player-wrapper { width: 100vw !important; height: calc(27px + 100vh + 59px) !important; position: absolute; top: -27px; }';
  118. css += 'body.asdf-16x9 .cbc-video--player-wrapper.cbc-live-or-full-evt:hover { top: calc(-27px - 59px); }';
  119. css += 'body.asdf-16x9 { margin-top: 100vh; }';
  120. //css += 'body.asdf-fill-height .cbc-video--player-wrapper { width: calc((100vh - 60px - 59px) * 1.777777777) !important; height: 100vh !important; margin: 0 auto; }';
  121. //css += 'body.asdf-fill-width .cbc-video--player-wrapper { width: 100vw !important; height: calc(60px + 56.25vw + 59px) !important; }';
  122. GM_addStyle(css);
  123. function onResize() {
  124. var height = 59 + window.innerWidth * 0.5625 + window.innerHeight * 0.06;
  125. var ratio = window.innerWidth / window.innerHeight;
  126. console.log('onResize', height, ratio)
  127. if (1.7 <= ratio && ratio <= 1.8 ) { // 16:9 = 1.7777777...
  128. document.body.classList.remove('asdf-fill-width');
  129. document.body.classList.remove('asdf-fill-height');
  130. document.body.classList.add('asdf-16x9');
  131. } else if (height > window.innerHeight) {
  132. document.body.classList.remove('asdf-fill-width');
  133. document.body.classList.remove('asdf-16x9');
  134. document.body.classList.add('asdf-fill-height');
  135. var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  136. videoBoxElement.style.width = "calc((100vh - 27px - 59px) * 1.777777777)";
  137. videoBoxElement.style.height = "100vh";
  138. videoBoxElement.style.margin = '0 auto';
  139. } else {
  140. document.body.classList.remove('asdf-fill-height');
  141. document.body.classList.remove('asdf-16x9');
  142. document.body.classList.add('asdf-fill-width');
  143. var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  144. videoBoxElement.style.width = "100vw";
  145. videoBoxElement.style.height = "calc(27px + 56.25vw + 59px)";
  146. }
  147. }
  148. window.addEventListener('resize', onResize);
  149. window.addEventListener('click', function(){
  150. setTimeout(onResize, 1000);
  151. });
  152. onResize();
  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. var css = '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
  177. if (document.location.pathname.startsWith('/playlist')) {
  178. css += '#player_container { height: 100vh!important; width: 100vw!important; }';
  179. css += '#playerv5-iframe { width: 100% !important; height: 100% !important; }'; // playlists
  180. css += '.sd_header.sd_header--fixed { top: 100vh; position: absolute; }';
  181. css += '#content { margin-top: 60px; }';
  182. movedTopPlayer(document.querySelector('#player_container'));
  183. absoluteTopPlayer('#player_container');
  184.  
  185. GM_addStyle(css);
  186.  
  187. } else if (document.location.pathname.startsWith('/video')) {
  188. //css +='.main-container-player { display: none; }';
  189. //css += '#player { height: 100vh!important; width: 100vw!important; }';
  190. css += '.Player { height: 100vh!important; width: 100vw!important; }';
  191. css += '.Player { top: 0!important; left: 0!important; }';
  192. css += 'header { position: absolute!important; top: 100vh !important; }';
  193. css += 'footer { margin-top: 50px; }';
  194. css += 'div[class^="Video__placeholder___"] { margin-top: -180px; height: 100vh!important; }';
  195. GM_addStyle(css);
  196. document.addEventListener('load',function(){
  197. movedTopPlayer(document.querySelector('.Player'));
  198. });
  199. }
  200.  
  201. } else if (document.location.host.endsWith('streamable.com')) {
  202. if (document.location.pathname == '/') {
  203. return;
  204. }
  205. var css = '#player-content, #player.container .media-container, #player.container #filler, #player.container .player { max-width: 100% !important; width:100%; }';
  206. css += '#player.container #filler { padding-bottom: 100vh !important; }';
  207. css += '.player { background: #000; }';
  208. css += '.player, #player.container video { max-height: 100vh; }';
  209. css += '#player > div[style="height:15px;"] { display: none; }';
  210. css += '#player.container .topbanner { display: none; }';
  211. GM_addStyle(css);
  212. } else if (document.location.host.endsWith('globaltv.com')) {
  213. var css = '#corusVideo_PlayerContainer { width: 100vw !important; height: 100vh !important; }';
  214. css += '#corusVideo_PlayerContainer + .playlist { display: none; }';
  215. css += '#corusVideo_PlayerContainer.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
  216. GM_addStyle(css);
  217. var videoPlayerElement = document.querySelector('#corusVideo_PlayerContainer') // corusVideo_PlayerContainer shawVideo_PlaybackArea
  218. movedTopPlayer(videoPlayerElement);
  219. } else if (document.location.host.endsWith('much.com')) {
  220. var css = '#TopVideoWidgetSection, #ShowNav, #MainHeader, #MastHeadTakeover { display: none; }';
  221. css += '#ShowTop #PlayerWrapper, #ShowTop .container-fluid, #ShowTop #ShowInfo, #ShowTop {';
  222. css += 'margin: 0 !important; padding: 0 !important;';
  223. css += 'width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;';
  224. css += '}';
  225. GM_addStyle(css);
  226. }
  227.  
  228. GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
  229. })();