Youtube Subtitles Edit

A script for changing the ugly ass youtube subtitles on CC. May make it so you can select your own subtitle look later on.

  1. // ==UserScript==
  2. // @name Youtube Subtitles Edit
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.7
  5. // @description A script for changing the ugly ass youtube subtitles on CC. May make it so you can select your own subtitle look later on.
  6. // @author Dildoer the Cocknight
  7. // @match *youtube.com/watch*
  8. // @match *youtube.com/embed*
  9. // @match https://www.youtube.com/watch*
  10. // @match https://www.youtube.com/embed*
  11. // @require https://code.jquery.com/jquery-1.11.0.min.js
  12. // @require https://code.jquery.com/ui/1.11.4/jquery-ui.js
  13. // @grant none
  14. // ==/UserScript==
  15. /* jshint -W097 */
  16.  
  17.  
  18. //note - my website (therealnig.ga) got hijacked so the manual selector is no longer working! If you want to edit your subs you'll have to do it manually within the script below!
  19.  
  20. //vars for my CSS stuff later, will set it so I can change these with a modal selector eventually
  21. var backgroundcolor = 'transparent'
  22. var textcolor = 'yellow'
  23. var fontsize = 150 //goes by Percent- 100% is the default!
  24. var fontfam = 'Special Elite'
  25. var textshadow = 'rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px'
  26. // Tells you that the script is working and it picked up the video.
  27. console.log("Video detected - Youtube Subtitles Editor Enabled!")
  28. //adds a spacer so we can add from google fonts
  29. var spacer = fontfam.replace(/ /g, "+");
  30. //Gives JQUERYUI.css and a few aditional fonts, gonna add a selector in there later to choose from Google fonts
  31. $('head').append('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron|Oleo+Script|' + spacer + '|Permanent+Marker|,">');
  32. $('head').append('<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">');
  33. //initial css style for the subtitles; gotta change that shit later on
  34. $('head').append('<style> .captions-text { color:' + textcolor + '!important; text-shadow:' + textshadow + '!important; font-family:' + fontfam + '!important; background-color:' + backgroundcolor + '!important; font-size:' + fontsize + '%!important; } </style>');
  35. //creates the menu option in jquery to open the modal for our subtitle customizer
  36. $('body').append('<div id="dialog" title="Subtitle Edit Menu" <div id="editcontent"> Background: <br> <input class="subBackground" value="transparent"> <br> Text color: <br> <input class="subColor" value="yellow"> </div></div>');
  37. $('#ytp-main-menu-id').append('<div class="ytp-menuitem" aria-haspopup="true" role="menuitem" tabindex="0"><div class="ytp-menuitem-label"><div><span>Subtitle Editor</span></div></div><button class="ytp-menuitem-content" id="opener">Edit</button></div>');
  38.  
  39. //ui scripts...
  40. $(function() {
  41. $( "#dialog" ).dialog({
  42. autoOpen: false,
  43. show: {
  44. effect: "blind",
  45. duration: 500
  46. },
  47. hide: {
  48. effect: "explode",
  49. duration: 500
  50. }
  51. });
  52. $( "#opener" ).click(function() {
  53. $( "#dialog" ).dialog( "open" );
  54. });
  55. });