☰

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);