YouTube Keep Video When Scrolling

Keeps the video in the same place when scrolling on a YouTube page.

  1. // ==UserScript==
  2. // @name YouTube Keep Video When Scrolling
  3. // @namespace http://skoshy.com
  4. // @version 0.2
  5. // @description Keeps the video in the same place when scrolling on a YouTube page.
  6. // @author Stefan Koshy
  7. // @match https://www.youtube.com/watch?*
  8. // @grant none
  9. // ==/UserScript==
  10. /* jshint -W097 */
  11. 'use strict';
  12.  
  13. var id = 'youtubeKeepVideoWhenScrolling';
  14.  
  15. var keepVideoStyle = `
  16. #player .player-api {
  17. position: fixed;
  18. padding-top: 12px;
  19. padding-bottom: 10px;
  20. background: #f1f1f1;
  21. margin-top: -1px;
  22. }
  23. .watch-non-stage-mode #player .player-api {
  24. box-shadow: 1px 1px rgba(241,241,241,1),-1px 1px rgba(241,241,241,1);
  25. }
  26. .watch-stage-mode #player .player-api {
  27. padding-top:10px;
  28. padding-bottom: 0;
  29. margin-top: 0;
  30. }
  31. `;
  32.  
  33. var otherStyle = `
  34. #`+id+`PinButton {
  35. box-sizing: border-box;
  36. width: 32px
  37. }
  38.  
  39. #`+id+`PinButton img {
  40. width: 100%;
  41. filter: invert(1);
  42. -webkit-filter: invert(1);
  43. padding: 3px;
  44. box-sizing: border-box;
  45. }
  46. `;
  47.  
  48.  
  49. function addGlobalStyle(css, cssID) {
  50. var head, style;
  51. head = document.getElementsByTagName('head')[0];
  52. if (!head) { return; }
  53. style = document.createElement('style');
  54. style.id = cssID;
  55. style.type = 'text/css';
  56. style.innerHTML = css;
  57. head.appendChild(style);
  58. }
  59.  
  60. addGlobalStyle(keepVideoStyle, id+'CSS');
  61. addGlobalStyle(otherStyle, id+'OtherCSS');
  62.  
  63. // add the button to the player
  64. var ytControls = document.querySelector('.ytp-right-controls');
  65. var ytSettingsButton = document.querySelector('.ytp-settings-button');
  66.  
  67. var pinButton = document.createElement('button');
  68. pinButton.innerHTML = '<img src="http://i.imgur.com/m4vqtk1.png"/>';
  69. pinButton.id = id+'PinButton';
  70. pinButton.className = 'ytp-button';
  71. pinButton.onclick = function() {
  72. var style = document.querySelector('#'+id+'CSS');
  73. if (style.disabled === false)
  74. style.disabled = true;
  75. else
  76. style.disabled = false;
  77. };
  78.  
  79. ytControls.insertBefore(pinButton, ytSettingsButton);