Overview

The purpose of this game is to experiment with programmatically updating a YouTube video's thumbnail.

Videos showcasing a dynamically changing title have been around for a while, but not so much with a thumbnail.

To make things more interesting, I also wanted to add a layer of interactivity where people could have an influence on certain elements within the thumbnail image.

Keep reading below to find out more about how it works.

How do I play?

In this game, you'll find a [+1] button that increments a counter from 0 to 100,000.

That counter is tied directly to a progress bar I've embedded within my video's thumbnail image.

When the progress bar reaches 100%, a new screen will appear (on my site) that allows anyone to vote on the next color.

What is the 'sync' timer for?

The sync timer indicates when the next cron job will run to update my video's thumbnail.

How does voting work?

Once the progress bar reaches 100%, the voting screen will appear.

Players can vote on the next color for the progress bar on my thumbnail. The color with the most votes wins.

Players may vote as many times as they'd like on as many different colors as they'd like.

The voting segment will last until the next sync occurs.

Why is the progress bar on the site out of sync with the video's thumbnail?

This is due to a few reasons:

1. Due to restrictions on the YouTube API, I'm only able to update my thumbnail image once every 30 minutes.

2. Thumbnail updates on YouTube are not always instantaneously visible to viewers and they may take some time to propagate out to everyone.

What if I am annoyed that your video's thumbnail has not updated sooner?

Unfortunately, I can't do much about how quickly the updates show up on YouTube, but if you want to see the latest version, you could always try accessing the thumbnail image directly.

Pro tip: I've added a randomized query param at the end of the image URL to help prevent caching but if it's still not changing for you, try changing the value to something else.

How are you modifying the thumbnail programmatically?

I set up a cloud function to run once every 30 minutes and perform the following steps:

1. Fetch the current count from the database.

2. Calculate the size of the progress bar as a percentage (i.e. 537 / 1000 = 53.7%).

3. Call Cloudinary's image API to overlay the progress bar onto my thumbnail.

4. And finally, call the YouTube data API and upload that image as my video's new thumbnail.

How often are you updating the thumbnail?

As of the time of writing the thumbnail will be updated under the following circumstances:

1. When the cloud function runs (once every 30 minutes).

2. When the progress bar on my site reaches 100%.

By default, the YouTube API has a quota limit of 10,000 units per day which equates to 200 thumbnail updates per day (50 per update).

I was able to put in a request to increase my project's limit to 90,000 only to find out after the fact that there are separate rate limits for thumbnail updates specifically. So every 30 minutes is the best I can do 😖.

How long will this game be available to play?

Not sure yet. Could be a day, could be a week.

It really just comes down to how well things go and how expensive it is to keep it running.