Resize Video To Window Size

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

当前为 2019-04-19 提交的版本,查看 最新版本

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