Get the view count of YouTube Video (without api key) and title and anything else
Published: 2022-06-19 06:44:14

**Update:** this only works in your browser in developers console if you're on the youtube page (otherwise you'll get a cors error). This is super useful for chrome extensions in which you execute content-script.js on the youtube page!

You can get the **view count** of a YouTube video **without an api key**. Here is the secret formula and quick solution:
```
async function getViews(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const viewCount = html?.split('viewCount":"')?.[1]?.split('"')?.[0];
  return viewCount ? parseInt(viewCount) : null;
}
```]

## Get more data from the video
Every Youtube page has a very useful ytInitialPlayerResponse variable. In this you can find subtitles, view counts, etc. 
- Go to any YouTube video
- Open developer console
- Refresh the page (important)
- past `ytInitialPlayerResponse` in the developer console
- you'll have lots of info at your disposal now!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puge7rm2ll2v1yqp86ah.png)

The view count is under videoDetails. In my solution i'm just searching (with `split`) on `viewCount: "` and I'm taking the first result. 

It would be better to be able to work with this `ytInitialPlayerResponse` variable. I found out that it's this part up to `var meta = document.createElement('meta')`

```
JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0])
```

You could get the complete video data with this:
```
async function getYouTubeVideoData(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  return ytInitialPlayerResponse;
}
```

## Get video Title

```
async function getYouTubeVideoTitle(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  return ytInitialPlayerResponse.videoDetails.title;
}

await getYouTubeVideoTitle('dQw4w9WgXcQ');
// will return 'Rick Astley - Never Gonna Give You Up (Official Music Video)'
```

You can return any parameter from the `ytInitialPlayerResponse` object:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utxh4zi1e7iqp8wdk776.png)

You could even retrieve the subtitles in two steps

```
// if no languageCode is given, then return first subtitle from the list
async function getYouTubeSubtitle(videoId, languageCode) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  const captionTracks = ytInitialPlayerResponse.captions. playerCaptionsTracklistRenderer.captionTracks;
  const captionTrack = languageCode ? captionTracks.find(c => c.languageCode === languageCode) : captionTracks[0];
  return await fetch(captionTrack.baseUrl);
}

await getYouTubeSubtitle('dQw4w9WgXcQ');
// will return 'Rick Astley - Never Gonna Give You Up (Official Music Video)'
```