Let's automate the thumbnail replacement on YouTube! - an interesting experiment (video, 6m)
In his latest video, Hyperplexed discusses his struggles with designing thumbnails for YouTube. He admits that he's not a fan of the process, particularly when it comes to choosing text and colors. Instead of learning to improve his skills, he came up with a more complex solution. Hyperplexed created a website that allows others to choose the thumbnails' colors, but there's a catch. To unlock the ability to choose a color, the progress bar on the thumbnail must reach 100%. This tool is quite creative and surprising as it introduces interactivity to a static image.
A key element in his narrative is user interaction with the thumbnail. Hyperplexed planned to create a simple interface with a button and a progress bar. Each button click updates a counter in the database. In the video, he explains how to transfer the current state of the progress bar from his site to his thumbnail. It seems like a complex process, but by utilizing the YouTube API and Cloud Functions, he demonstrates how to periodically update the title and thumbnail of the video.
He wonders whether something similar can be done with the thumbnail, allowing for dynamic updates. This is where Cloudinary comes in, the sponsor of his video, which streamlines the process. Hyperplexed breaks the thumbnail into several layers, giving him more control over their modifications. By processing images in multiple layers, he can change colors, add text, and sync the state of his site with the thumbnail in real-time.
When the progress bar reaches 100%, users will be able to select colors, and after the voting ends, the thumbnail will be updated based on the most popular choice. An issue that could ruin this plan is the YouTube API quotas—each thumbnail update costs units, and Hyperplexed must be careful not to exceed the limit. After submitting an application, his quota was increased, which initially filled him with hope for greater efficiency, but he quickly hit a new limitation.
Ultimately, he decides to adjust the update schedule to every 30 minutes, which is far from his original plan. Hyperplexed humorously reflects on various snags encountered during the project realization. He emphasizes that even when the project seems pointless, he can assign his own meaning to it. As of the time of writing, the video has received 230,403 views and 16,211 likes, indicating a positive reception from his audience.
In summary, Hyperplexed introduces an innovative approach to thumbnails in this video, merging technology and interactivity into one fascinating project. This creative way to engage viewers and face technology expectations and constraints is sure to inspire other creators to implement innovations for their channels.
Toggle timeline summary
-
The speaker expresses dislike for designing thumbnails and explores an automated solution.
-
They introduce a website that creates thumbnails where users can choose colors.
-
The speaker discusses the technical challenge of making a dynamic progress bar in a static image.
-
A simple interface with a button and progress bar is proposed.
-
An overview of fetching the current view count from YouTube's API is provided.
-
The process of updating the thumbnail is introduced, likening it to a slideshow.
-
They mention using Cloudinary to automate thumbnail updates.
-
Different layers for the thumbnail are discussed to allow easy modifications.
-
They explain that Cloudinary's API allows for dynamic adjustments to the thumbnail.
-
The color selection process is explained, involving user interaction.
-
The potential issue of YouTube API quota limits is discussed as a major concern.
-
The speaker shares the success of getting their quota increased by Google.
-
They face another setback with a rate limit error, affecting thumbnail updates.
-
Despite challenges, the speaker adjusts their plans for thumbnail updates.
-
The speaker thanks Cloudinary for their support in the project.
Transcription
I don't like designing thumbnails. I don't like deciding on the text, and I certainly don't like picking the colors. And yeah, I guess, in theory, I could just learn how to get better at it. But I am a programmer. A problem solver. Which is why I've decided to, instead, spend an inordinate amount of time coming up with a solution that's as difficult and convoluted as humanly possible. You see, rather than having to decide on the color of my thumbnail myself, I created a site that allows you to do that for me. But there's a catch. The only way to unlock the screen that lets you choose a color is by first getting the progress bar on my thumbnail to reach 100%. Now, you might be wondering how it's possible to make a dynamic progress bar inside of a static image. And that, my friends, is an excellent question. So let us begin. The very first thing we're going to need is a way for people to interact with the thumbnail. A simple interface with a button and a progress bar should do just fine. Behind the scenes, every time the button is clicked, we can update a counter in a database. But how do we transfer the current state of the progress bar from our site to our thumbnail? Well, I'm assuming a good chunk of you have already seen this video, where the title always contains the current view count. There are plenty of tutorials on how to achieve this for yourself, but to summarize, it goes something like this. Set up a cloud function to run every few minutes. Every time it runs, it should fetch the current view count from YouTube's API. And if there were changes, call the endpoint to update the title with the new value. The question is, can we do the same thing with a thumbnail? And yeah, according to the documentation, it looks like we can. So in a sense, what this means is that we can turn our video's thumbnail into what is effectively a slideshow. Albeit a very slow slideshow, but we still have a problem. I'm not about to sit here and manually update this slideshow every 5 minutes for the rest of eternity. So instead, we're going to use Cloudinary, who I'd like to thank for sponsoring this video, because they can help us do this step automatically. Back in our function, we can fetch the current count from the database. And before we send a request to YouTube, we need to tell Cloudinary to generate the next slide. But as it stands now, our thumbnail is already a composite image, which doesn't make it very easy to modify the individual components. So what if instead we broke it apart into separate layers? We'd need a base layer, which is just the background, a rectangle for the progress bar, some tick marks to go on top, and we'll save the text layer for later. We can upload these images to Cloudinary, and then reference them via their respective URLs. So technically, if we wanted, we could just fetch the base image as is, send that to YouTube, and be on our way. Or alternatively, we can take advantage of Cloudinary's API to stack these images back into their original form by defining each of them as a new layer. The primary difference is that we can now apply modifications to these layers directly in the URL. We can do anything from cropping and recoloring, to adding a new text layer on top, which means that not only do we have a way to sync the current state of the site with the thumbnail, but we also have a solution to my initial problem, which was allowing you all to be in charge of the color. So how exactly is this color selection process going to work, and why am I only supposed to watch this video if the thumbnail says 100%? Well, if you recall from earlier, the way you make the progress bar go up is by clicking the button on my site. Every 5 minutes, the Cloud Function will generate the next frame via Cloudinary, and then upload it to YouTube. So if you just so happen to click the video when the thumbnail actually read 100%, then you're in luck, because that means the hidden screen on my site has been revealed, which allows anyone to vote on the next color as many times as they'd like. At the end of the voting cycle, the thumbnail will be reset, and the new progress bar will change to whatever option was most popular. And that leaves just one problem remaining, a problem that unfortunately has the potential to ruin this project altogether. If you've ever worked with the YouTube API before, you'll be familiar with their quota system. Every action you perform has an associated cost, which counts towards the default maximum of 10,000 units per day. If each new thumbnail costs us 50 units, that means the most updates we could do is 200, or roughly 1 every 7 minutes, slightly less than what our function is currently set to run. A quick search will tell you that it is possible to get this limit increased, but I was wary of whether or not Google would approve of such a frivolous use case. Even so, I filled out the form and hit submit. After a back and forth that took around 2 weeks, I received their final verdict. Your application has been approved. We've increased your quota to 90,000. This was extremely exciting news, because if I wanted, I now had the option to update the thumbnail once per minute, which was as close to achieving my goal of having a real-time thumbnail as I might expect to get. So, I modified the schedule of my function and set it loose for the next few hours. I began to think I was in the clear when suddenly I encountered another issue. 429, an error code indicating a rate limit. A quick search told me that not only was my plan foiled yet again, but my entire channel was now locked out of thumbnail updates for up to 24 hours, and for a moment I wondered whether I should even bother continuing with this project at all. But then I remembered that none of this had a point to begin with, and as with all things that are pointless, that means I have the power to pick what the point should be. So, I said to hell with it and set the sync time to once every 30 minutes. A far cry from where I wanted to be, but for now this will have to do. If anyone here knows someone at Google with superpowers, that would be amazing. And a big thanks to Cloudinary for being a sponsor, and for helping make videos like this one possible.