2015 Screenshots here
2013 Screenshots here
2012 Screenshots here
2010 Screenshots here
2006 Screenshots here
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, Brave, etc. users: get the Chromium-based Build. For Firefox, Zen, Waterfox, etc. users: get the Firefox-based 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.
Extension Signning Required (For most users):
- Go to
about:debugging#/runtime/this-firefox - Click on
Load Temporary Add-onat the top - Navigate to the ZIP file of the extension.
No Signning Required (Developer Edition, MyPal, and some other browsers):
- Go to
about:addons - Click on the gear icon below the search bar at the top right of the page, and click on
Install Add-on From Files... - Navigate to the ZIP file of 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 startornpm start foldersto keep the folders ornpm start zipsto keep the zips. - 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