.png)
![‘Companion’ Ending Breakdown: Director Drew Hancock Tells All About the Film’s Showdown and Potential Sequel: ‘That’s the Future I Want for [Spoiler]’](https://variety.com/wp-content/uploads/2025/02/MCDCOMP_WB028.jpg?#)
Build a Simple YouTube App with Vanilla JavaScript
The Tuts+ YouTube channel is fast approaching 1.5M subscribers. Let’s celebrate this great achievement by creating something YouTube-oriented! We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript. The concept will be pretty straightforward; we’ll build a simple UI where we can enter the ID of a channel and our app will return info about it. What We’ll be Building As I often provide, here’s an introductory video to give you a taste of the app that we’re going to create: And, of course, there’s the CodePen demo for you to fork and play with: This demo will need your own API key (added in the JS panel) in order to work. Inspiration It’s worth noting that the project structure will be similar to another web app we covered some years ago. Build a Simple Weather App With Vanilla JavaScript George Martsoukos 30 Apr 2021 There’s also a video version for this tutorial which you can watch if you prefer. FREE 1.1 Hours Build a Simple Weather App With JavaScript In this short course, you’ll learn how to create a simple yet functional weather app using vanilla JavaScript and the Open Weather API. 1. Scaffolding the YouTube App Before we start creating our app, there are a few things that we have to address. Grab a YouTube API key As a first and mandatory thing, we should get a YouTube API key that will give us access to the YouTube Data API. To do so, we should follow the instructions on this page and set up a project in the Google Cloud Console with the YouTube Data API v3 enabled. In my case, I’ve already done it while building the app. Now, it’s your turn to generate an API and include it in your forked demo. For production environments, remember that it’s always wise to restrict the API requests to specific websites, IP addresses, etc. Grab a Lottie Animation Optionally, to make our app as unique as possible, we’ll grab a Lottie animation from the LottieFiles library and play it for channels with 1M or more subscribers. First, we’ll generate an asset link for this animation and customize it as we wish. As things move quickly, at this point, the LottieFiles team suggests using the dotLottie file format instead of the traditional Lottie JSON to reduce the file size. In our case, as we’re using a CodePen demo, we’ll import the required .mjs file like this: 1 import { DotLottiePlayer } from "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"; Then, as we’ll see in an upcoming section, we’ll include the generated dotlottie-player component in the markup that represents the channel info. Besides, if you need a refresher about how to include Adobe After Effects animations on a web page and Lottie Animations in general, consider the following tutorials: How to Add Adobe After Effects Animations to a Web Page George Martsoukos 03 Dec 2020 How to Build a Coming Soon Page With Lottie Animations George Martsoukos 19 May 2021 How to Hide/Reveal a Sticky Header on Scroll (With JavaScript) George Martsoukos 26 May 2021 2. Define the Page Markup Let’s now focus on the app development. We’ll only define a section that will include a heading, a search form, and an empty span element. We’ll set the input element as required and force it to wait 24 characters to avoid unnecessary AJAX requests. From my tests, I’ve seen that the length of a YouTube channel ID is 24, although you can update the minlength and maxlength attribute values if you notice something different. The span element will appear with an appropriate message under certain conditions. For example, if we search for a YouTube channel ID that doesn’t exist or if, for some reason, the response is unsuccessful (i.e. 400 Bad Request, 404 Not Found, etc.). Along the way, we’ll see the markup for the channel info that will be generated dynamically. Here’s the initial page markup: 1 <section class="top-banner"> 2 <div class="container"> 3 <div class="text"> 4 <h1>Simple App With the YouTube API</h1> 5 <p class="label">Use <mark>UC8lxnUR_CzruT2KA6cb7p0Q</mark> for testing which refers to the Envato Tuts+ channel ID</p> 6 </div> 7 <form> 8 <input type="search" minlength="24" maxlength="24" placeholder="Insert a valid YT channel ID" autofocus required> 9 <button type="submit">SUBMIT</button> 10 <span class="msg"></span> 11 </form> 12 </div> 13 </section> The autofocus attribute of the search field won’t work unless you view the CodePen demo in debug mode. Find a YouTube Channel ID One quick way to find the ID of a YouTube channel is through the page source. First, navigate to the
The Tuts+ YouTube channel is fast approaching 1.5M subscribers. Let’s celebrate this great achievement by creating something YouTube-oriented! We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript.
The concept will be pretty straightforward; we’ll build a simple UI where we can enter the ID of a channel and our app will return info about it.
What We’ll be Building
As I often provide, here’s an introductory video to give you a taste of the app that we’re going to create:
And, of course, there’s the CodePen demo for you to fork and play with:
Inspiration
It’s worth noting that the project structure will be similar to another web app we covered some years ago.
There’s also a video version for this tutorial which you can watch if you prefer.
1. Scaffolding the YouTube App
Before we start creating our app, there are a few things that we have to address.
Grab a YouTube API key
As a first and mandatory thing, we should get a YouTube API key that will give us access to the YouTube Data API. To do so, we should follow the instructions on this page and set up a project in the Google Cloud Console with the YouTube Data API v3 enabled. In my case, I’ve already done it while building the app. Now, it’s your turn to generate an API and include it in your forked demo.
For production environments, remember that it’s always wise to restrict the API requests to specific websites, IP addresses, etc.
Grab a Lottie Animation
Optionally, to make our app as unique as possible, we’ll grab a Lottie animation from the LottieFiles library and play it for channels with 1M or more subscribers.
First, we’ll generate an asset link for this animation and customize it as we wish.
As things move quickly, at this point, the LottieFiles team suggests using the dotLottie file format instead of the traditional Lottie JSON to reduce the file size.
In our case, as we’re using a CodePen demo, we’ll import the required .mjs file like this:
1 |
import { DotLottiePlayer } from "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"; |
Then, as we’ll see in an upcoming section, we’ll include the generated dotlottie-player component in the markup that represents the channel info.
Besides, if you need a refresher about how to include Adobe After Effects animations on a web page and Lottie Animations in general, consider the following tutorials:
2. Define the Page Markup
Let’s now focus on the app development.
We’ll only define a section that will include a heading, a search form, and an empty span element.
We’ll set the input element as required and force it to wait 24 characters to avoid unnecessary AJAX requests. From my tests, I’ve seen that the length of a YouTube channel ID is 24, although you can update the minlength and maxlength attribute values if you notice something different.
The span element will appear with an appropriate message under certain conditions. For example, if we search for a YouTube channel ID that doesn’t exist or if, for some reason, the response is unsuccessful (i.e. 400 Bad Request, 404 Not Found, etc.).
Along the way, we’ll see the markup for the channel info that will be generated dynamically.
Here’s the initial page markup:
1 |
<section class="top-banner"> |
2 |
<div class="container"> |
3 |
<div class="text"> |
4 |
<h1>Simple App With the YouTube API</h1> |
5 |
<p class="label">Use <mark>UC8lxnUR_CzruT2KA6cb7p0Q</mark> for testing which refers to the Envato Tuts+ channel ID</p> |
6 |
</div>
|
7 |
<form>
|
8 |
<input type="search" minlength="24" maxlength="24" placeholder="Insert a valid YT channel ID" autofocus required> |
9 |
<button type="submit">SUBMIT</button> |
10 |
<span class="msg"></span> |
11 |
</form>
|
12 |
</div>
|
13 |
</section>
|
Find a YouTube Channel ID
One quick way to find the ID of a YouTube channel is through the page source. First, navigate to the desired channel page, then view its source code and search for https://www.youtube.com/channel/. The channel ID will come after this base URL.
3. Set the Main Styles
As this is a large tutorial, for the sake of simplicity, we’ll skip the starting styles and only concentrate on the main ones—you can view all of them by clicking the CSS tab of the demo.
Form Styles
On medium screens and above (>700px), the layout should look like this:
On smaller screens, the form elements will split into two lines:
Here are the associated styles:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.top-banner form { |
4 |
position: relative; |
5 |
display: grid; |
6 |
grid-template-columns: 1fr auto; |
7 |
grid-gap: 15px; |
8 |
align-items: center; |
9 |
justify-content: center; |
10 |
max-width: 1000px; |
11 |
}
|
12 |
|
13 |
.top-banner form input { |
14 |
font-size: clamp(24px, 2vw, 32px); |
15 |
height: 40px; |
16 |
padding-bottom: 10px; |
17 |
border-bottom: 1px solid currentColor; |
18 |
}
|
19 |
|
20 |
.top-banner form input::placeholder { |
21 |
opacity: 1; |
22 |
color: var(--white); |
23 |
}
|
24 |
|
25 |
.top-banner form button { |
26 |
font-weight: bold; |
27 |
padding: 15px 30px; |
28 |
border-radius: 5px; |
29 |
background: var(--red); |
30 |
transition: background 0.3s ease-in-out; |
31 |
}
|
32 |
|
33 |
.top-banner form button:hover { |
34 |
background: var(--darkred); |
35 |
}
|
36 |
|
37 |
.top-banner form .msg { |
38 |
position: absolute; |
39 |
top: 100%; |
40 |
left: 0; |
41 |
}
|
42 |
|
43 |
@media (max-width: 700px) { |
44 |
.top-banner form { |
45 |
grid-template-columns: 1fr; |
46 |
}
|
47 |
|
48 |
.top-banner form .msg { |
49 |
position: static; |
50 |
}
|
51 |
}
|
Channel Styles
As soon as we successfully get back from the server info for a channel, they will appear in a card layout like this:
The styles aren’t anything too complicated, so we won’t go into more detail at this point:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.card { |
4 |
padding: 4%; |
5 |
text-align: center; |
6 |
margin-top: 70px; |
7 |
color: var(--white); |
8 |
background: var(--total-black); |
9 |
border-radius: 7px; |
10 |
overflow: hidden; |
11 |
}
|
12 |
|
13 |
.card .details img { |
14 |
border-radius: 50%; |
15 |
}
|
16 |
|
17 |
.card .details .title { |
18 |
margin-top: 10px; |
19 |
}
|
20 |
|
21 |
.card .details .description { |
22 |
max-width: 80%; |
23 |
margin: 30px auto 0; |
24 |
}
|
25 |
|
26 |
.card .total-videos { |
27 |
position: relative; |
28 |
z-index: 1; |
29 |
margin-top: 30px; |
30 |
}
|
31 |
|
32 |
.card .total-subscribers { |
33 |
position: relative; |
34 |
display: inline-grid; |
35 |
grid-template-columns: auto auto; |
36 |
grid-gap: 10px; |
37 |
align-items: center; |
38 |
font-weight: bold; |
39 |
margin-top: 60px; |
40 |
background: var(--red); |
41 |
}
|
42 |
|
43 |
.card .total-subscribers dotlottie-player { |
44 |
position: absolute; |
45 |
top: 50%; |
46 |
left: 50%; |
47 |
transform: translate(-50%, -50%); |
48 |
}
|
49 |
|
50 |
.card .total-subscribers .outer { |
51 |
padding: 10px; |
52 |
}
|
53 |
|
54 |
.card .total-subscribers svg { |
55 |
fill: var(--red); |
56 |
background: var(--white); |
57 |
padding: 5px; |
58 |
box-sizing: content-box; |
59 |
}
|
4. Add the JavaScript
At this moment, we’re ready to build the core functionality of our YouTube app. Let’s do it!
On Form Submission
Each time a user submits the form by pressing the Enter key or the Submit button, we’ll do two things:
- Stop the form from submitting, hence prevent reloading the page.
- Grab the value that is contained in the search field.
Here’s the starting code:
1 |
const topBanner = document.querySelector(".top-banner"); |
2 |
const form = topBanner.querySelector("form"); |
3 |
const input = topBanner.querySelector("input"); |
4 |
|
5 |
form.addEventListener("submit", (e) => { |
6 |
e.preventDefault(); |
7 |
const channelId = input.value; |
8 |
});
|
Perform an AJAX Request
Before we go through the AJAX request, it’s important to read the docs and understand how to structure it. In our case, we want to get channel info, so we’ll focus on the channel endpoint and pass the following parameters:
- The
partparameter with values thesnippetandstatisticsnames. - The API key. Again, you should use your own key.
- The channel ID we’re interested to get info. In a previous section, we covered a way to find the ID of an existing channel.
We can even experiment with the HTTP requests through the helper tool that is available on the right side of this page.
With all the above in mind, our request URL should look something like this:
1 |
const BASE_URL ="https://www.googleapis.com/youtube/v3/channels?part=statistics,snippet"; |
2 |
const API_KEY = "AIzaSyAHupLf37J-vEziyQ-pItfoaLS5XUqdVq8"; |
3 |
const channelID = input.value; |
4 |
|
5 |
const url = `${BASE_URL}&id=${channelId}&key=${API_KEY}`; |
We’ll use the Fetch API to perform the AJAX request—I assume you’re familiar with this technique. There’s also a series if you need a refresher. As discussed previously, we’ll add proper error handling for unsuccessful cases. For example, if we search for a non-existing channel or the status request hasn’t succeeded.
So, our AJAX request would look something like this:
