Resize Youtube Player To Window Size

By Zren Last update Mar 22, 2014 — Installed 2,370 times.

Script Summary: Moves the video to the top of the website and resizes it to the screen size. A side effect is that the resolution will auto-select 480p/720p/1080p if it fits in the window due to the video player's default behaviour.



Version: 1.36

Suggestions

  • Youtube Center now has this feature with a few more options in their script. Check out YT Center Settings > Player > Fullscreen Top Player.
  • Use Yays! or Youtube Center to select a video resolution if you want a constant resolution.
  • Auto-Hide the Progressbar & Controlbar with Youtube Center.
  • If using Youtube Center:
    • Version 1.31+ should automatically set these settings for you.
      • Unchecked YT Center Settings > Player > Player Size > Enable Resize.
      • Unchecked YT Center Settings > Player > General > Scroll to Video. YT Center will scroll to the wrong location.

Screenshots

After loading the video webpage you will see:

It appears above the rest of the site, so you can scroll down for the description, related links, etc.

Changelog

1.36 - March 22, 2014

  • BugFix: On the HTML5 player, resizing it to a non standard width will cause the cursor in the seek bar to not line up. In order to fix this, the script now removes the .watch-small, .watch-medium or .watch-large from the #player element.

1.35 - Febuary 12, 2014

  • Hook into the appbar-guide-delay-load event. It should be called on every single page however, unlike the other events...
  • Fix another regression from rewriting the script: check if the script is on a /watch? page before runnning.

1.34 - Febuary 7, 2014

  • Re add code to move the playlist as not all users might have updated to the new UI.

1.33 - Febuary 7, 2014

  • Check the previous player state before moving to decide to autoplay or not.

1.32 - Febuary 7, 2014

  • Fix issue where video would bug when playing videoes in a row.
  • Refactored script.
  • Autoplay videos as moving the player pauses the video.

1.31 - October 28, 2013

  • Automatically uncheck relevant YT Center settings for the user. This is done during the player-added event simply because it (should) be after YT Center is up and running.

1.30 - October 28, 2013

  • Create a placeholder to mark where the player was, so we can move it back there during a SPF navigation.
  • Hook into the init-watch and dispose-watch events rather than the ones used before (player-added and navigate).

1.29 - October 26, 2013

  • Minor CSS update to fix padding below the playlist tray caused by todays update.

1.28 - October 23, 2013

  • [Thread] Update the fixed header so it doesn't overlay the video.

1.27 - September 8, 2013

  • Go back to moving the #player element rather than #player-api as the playlist bar is no longer attached above it.

1.26 - August 20, 2013

  • Remove references to -legacy.
  • Check the window.location.href for /watch? to run the script. The old way no longer works (checking for #player-api) as it's now pregenerated even on the homepage.
  • Add debugging ouput to the console.
  • Move the Video Manager bar into #watch7-content so that it fits in seemlessly [Screenshot].

1.25 - August 15, 2013

  • The script now moves the playlist bar and tray. The playlist tray is moved into the sidebar element.
  • General cleanup of unused styling.
  • Don't remove the script selector from the body element during AJAX navigation as it looks weird if you notice the removal of this scripts styling. Youtube will removes it later (at a proper time) anyways.
  • Only hide the horizontal scrollbar when fully scrolled to the top.

1.24 - August 15, 2013

  • [Thread] Update for today's Youtube update. #player-api#player-api-legacy.

1.23 - August 11, 2013

  • [Thread] Bug Fix for users using Youtube Center. Had to override the height on the #player element.

1.22 - August 10, 2013

  • [Thread] Bug Fix for users using Firefox. The #player-api element had a float: left; on it. The UI in general doesn't seem to have had the update Chrome does (no fixed header + guide).

1.21 - August 1, 2013

  • [Thread] Wrap an exception caused by the window.yt not yet existing when the script gets run in NinjaKit on Safari. Will possibly cause this bug to resurface when using safari.

1.20 - July 30, 2013

  • Fix bug in Firefox/Greasemonkey where the script would break trying to get the window.yt object reference by changing all references to window to unsafeWindow.

1.19 - July 30, 2013

  • Run the script slightly earlier at the player-added event.
  • The horizontal scrollbar is now hidden until the video is no longer visible.
  • Fix bug where the playlist tray was overlapping the video.
  • Fix bug where the script was run twice on page load.

1.18 - July 28, 2013

  • I managed to find a proper place to hook into Youtube's new AJAX technique. Wrapping window.history.pushState didn't seem to work. On a further look, it also seems like I should have tried wrapping replaceState as well. Instead of wrapping ytspf.config like Youtube Center, I've found yt.pubsub.instance_.subscribe(eventName, callback). The bugs listed in 1.17 are fixed.
    • Listen to the navigate event which is triggered before the page loads through AJAX in order to perform a cleanup (delete the video player as it's out of position).
    • Listen to the player-ready event in order to move the player.

1.17 - July 26, 2013

Youtube's latest update now loads new pages through ajax (and also when you click a Youtube link in Google).
  • Temporarily move the main selector used to identify the script body.ytwp-window-player to html.ytwp-window-player body. Navigating to a new page through ajax will clear all classes attached to the body element.
Until I've managed to hook into Youtube's new SPF/Ajax technique, the following bugs will be prevalent.
  • Visiting the homepage, then clicking a video won't cause the script to run.
  • Visiting the homepage (or any other url) will still show the last video above the page.

1.16 - July 24, 2013

  • Use unsafeWindow.addEventListener(...) instead of window.onresize = function(){...}. window.addEventListener was broken in the recent version of Tampermonkey, but should work now.

1.15 - July 19, 2013

  • Use absolute positioning on the guide until the user has scrolled past the video completely.
  • Do checks for if the video is in view (for switching to the fixed header) when the window is resized.

1.14 - July 16, 2013

  • Minor refactor on the last update and removed a debugging console.log().

1.13 - July 16, 2013

  • Use absolute positioning on the fixed header until the user has scrolled past the video completely. It will add the class ytwp-viewing-video to the body element when doing so.

1.12 - July 15, 2013

  • Remove some whitespace from some large areas of whitespace caused by branded pages (Example).
  • Resize the playlist tray to the same width as the sidebar.
  • Inject the completed stylesheet instead of updating as the script runs.

1.11 - May 7, 2013

  • Fix edge case missed in the last version. There was another rule that affected the padding-left when the guide was collapsed and under the small page width media query.

1.10 - May 7, 2013

  • Fix padding on the playlist bar when using 'Center Page' in YT Center.

1.9 - May 3, 2013

  • Removed padding and margin-top override on #player.
  • Adjusted selectors for the sidebar due to the shifting of element/classes.

1.8 - Apr 2, 2013

  • Change all occurance of #playlist-main-container to #playlist.
  • Use !important when settings margin-top on the sidebar due to it being set at element level (only on non-playlist pages).
  • Fix styling margins on the sidebar on pages with the playlist bar.

1.7 - Mar 20, 2013

  • Updated for Youtube's new layout. #watch7-video-container became #player, #watch7-video became #player-api.
  • The fixed Feedback button code was removed (no longer there).
  • Raised the z-index of the #watch7-creator-bar due to the #guide overlaying it and making the buttons unclickable. This is most likely a side effect of the last patch because the #watch7-creator-bar was a child of #watch7-video-container and therafor was no longer moved with the video (speculation). The creator bar currently looks like so.

1.6 - Feb 28, 2013

  • Script is now only run on the /watch page.
  • Removed whitespace margin leftover from moving the video.
  • The script now moves the #watch7-video instead of the #watch7-video-container element due to Youtube's new update which will move the #watch7-playlist-container element above the #watch7-video-container element. An example of this new bug can be seen here.
  • Fixed typo in local variable name.

1.5 - Feb 5, 2013

  • Refactored code to inject overriding CSS instead of applying styling to the elements themselves.
  • Deleted the Feedback element altogether.
  • Fixed compatibility with YT Center. (Forum Post)
  • Fixed styling of the Video Manager bar when browsing your own videos. (Forum Post) (Example)
  • Added css class to the body tag so people can style around this effects of this script. Use body.ytwp-window-player with your selector(s).
  • Overwrote the smooth resizing of the video player.

1.4 - Jan 6, 2013

  • Fixed the video getting resized when opening the guide (Example).
  • Moved the fixed Feedback element to the bottom of the page (Example).

1.3 - Dec 27, 2012

  • Fix styling on pages with a playlist bar by:
    • Moving down the related videos with the small video player
    • Fixing the width of the playlist bar and un-hiding the toggle playlist button in large video mode.
  • Update script metadata.

1.2

  • Fixed styling to work in small video mode.
  • Fixed styling to work in FireFox. Examples: [1] | [2]. Note that the feedback button was moved in later versions.