This is basically the continuation of my userscript, YT-HTML5-Player. The reason I made the script into a extension is because it's easier to install & manage, more people could find the script, no need for userscript extension like Tampermonkey, plus synced settings across devices connected to the same account on your browser.
It was also getting to a point where I couldn't fix certain issues, or some issues could be fixed but it would also break something else. So I said, "Screw it!", and made the script into a browser extension!
Well, didn't you see the screenshots above?
The Custom Theme Settings page of the PlayerTube extension is the heart for creativity. To start on making your own custom theme, enable the Toggle Custom Theme option in the Custom Theme Settings section. Then, close and re-open the PlayerTube settings and scroll down to the same section.
If the Toggle Custom Theme is set to enabled, users will be able to change the look their YouTube player. Play around with each setting, and make sure to read each option's description to better understand it's intention and possible shortcuts. Each setting can be reset by clicking on the undo button on the right of the option's input.
When you're done with customizing your theme, you can copy it's code by scrolling down to the Import, Copy, or Reset Settings, and copying the code inside of the text box before the Apply Settings button.
In the future, I'd like to have a page for users to upload their own themes, but as of now, there isn't a such thing like that.
Or, if you were to be copying a theme from someone else...:
- Open up the PlayerTube popup menu.
- Scroll down to
Import, Copy, or Reset Settings. - Copy the code from one of the examples below or somewhere else, and paste it into the big text box in the menu.
- Click on the
Apply Settingsbutton, and reload the YouTube page!
Here's some examples provided by your's truly:
You may edit these examples as much as you'd like, or use them as a template for your own theme!
For those who want the newest of features right now, here's what you gotta do:
⚠️ IMPORTANTE!!!⚠️ Make sure you're logged into a GitHub account, or else you can't download any files from the Actions tab, which is where the Beta / Dev builds are stored.- Go to the
PlayerTube build-n-packworkflow in the Actions tab and click on the latest workflow run at the top of the list. - Download the Artifact for your browser (For Chrome, Opera, or Brave users: get the Chromium Build. For Firefox-based users: get the Firefox build).
- If you're not using a Firefox-based browser, extract all the files from the ZIP file into a folder.
- Load the extension on your browser, which is explained below.
- For Chromium-based browsers, open a new tab and go to
chrome://extensions. - Make sure the
Developer modeswitch is enabled at the top right. - Click on
Load unpackedat the top left, and navigate to the folder which has the extension.
- Go to
about:debugging#/runtime/this-firefox - Click on
Load Temporary Add-onat the top, and navigate to the ZIP file which has the extension.
So, you like to build stuff yourself? Well, here's how to do it.
⚠️ IMPORTANTE!!!⚠️ Make sure you have Node.js & NPM installed, 'cuz the build script uses it!!!!
- Download le code
git clone https://github.com/ktg5/PlayerTube.git - Install the NPM modules
npm i - Run the build script
npm start - Once the building script is done and no errors appear, follow the instructions for loading the extension for your browser via the "Beta / Dev builds" instructions
