I was looking for a tool that could easily scale the image based on YouTube's thumbnail sizes across their site. I quickly found out that sites were charging for this very simple thing that someone with very little know-how with HTML or simply Google could do for free. So I made this quick and easy HTML page that can scale the "myThumbnail.jpg" file across all thumbnail sizes. There is also alternate thumbnails which can be replaced using Notepad++ replace tool using the video IDs.
Feel free to use this tool how you like, it's open source because something like this should not be charged for IMO.
Some interesting stats from my first test for Tube Helper 2.0
Impressions increased by 12% (5.9K to 6.6K)
Click Through Rate increased by 50% (2.5% to 3.8%)
Views From Impressions increased by 100% (147 to 249)
Average View Duration stayed about the same only 10 seconds more. (1:24m to 1:34m)
Watch Time from impressions increased by 90% (3.47 to 6.52)
- Download the files from the resources tab.
- Open the HTML file with your browser.
- Can work online or offline as long as you have a browser.
- Replace the myThumbnail.jpg with your custom thumbnail.
- Make sure that the name and extension (.jpg) are the same.
- Refresure the page in your browser
- This will update the myThumbnail.jpg image in the HTML document.
It is now possible to change the thumbnails in the src/javascript/<page_name>.js files.
Similar to before you can change the IDs using this part of the code.
var aNewId = "gzKb-JxjyWQ";
var bNewId = "zv-TS_mEHE4";
var cNewId = "RNCwBSPTZiM";
var dNewId = "V2IhvWpcjVg";
var eNewId = "j8y-_ts_H8s";aNewId = Thumbnail A "gzKb-JxjyWQ"
bNewId = Thumbnail B "zv-TS_mEHE4"
cNewId = Thumbnial C "RNCwBSPTZiM"
dNewId = Thumbnial D "V2IhvWpcjVg"
eNewId = Thumbnail E "j8y-_ts_H8s"
Offline Thumbnails are stored under the src/images/thumbnails folder.
Your thumbnail name should be "myThumbnail.jpg"
Your thumbnail should be in the root folder where the src folder and myThumbnial.jpg files are located.
Replace the myThumbnial.jpg and refresh the page to see the changes across the app.
Themes You can change the theme using the src/css/dark_theme.css or the light_theme.css files.
You can easily obtain the files needed from the releases tab.
