DEV Community

loading...
Cover image for Dynamically Generated YouTube Stats for your GitHub Readmes

Dynamically Generated YouTube Stats for your GitHub Readmes

dhyeythumar profile image Dhyey Thumar Originally published at dhyeythumar.Medium Updated on ・2 min read

Do you like to share the source code via github?

If the answer to the above question is yes, then this article is valuable for you. Recently I created a project which dynamically generates YouTube Stats Card for the youtube channels and videos. These cards will give an aesthetic look on your Github profile readme and the repo readmes as compared to the normal youtube URL.

YouTube Stats Card allows you to simply add a markdown image link and it will show the real-time stats for your Channel and Videos as follows.

In this article, I will explain how to use this to generate elegant statistics for your YT channel and videos.

. . .

YouTube Channel Stats

![Dhyey's youtube channel stats](https://youtube-stats-card.vercel.app/api?channelid=UCpKizIKSk8ga_LCI3e3GUig&layout=extruded&theme=dark_pink)
Enter fullscreen mode Exit fullscreen mode

The above link will generate the following stats card having layout as extruded and color theme as dark pink:

Dhyey's youtube channel stats

You can also customize the appearance of your Channel Stats Card with the following URL query params:

  • layout - Default, Center, Extruded (name)
  • hide_icons - Hide the icons from channel card (boolean)
  • hide_logo - Hide the logo from channel card (boolean)
  • theme - Name of the theme, choose from all available themes
  • hide_border - Hides the card's border (boolean)
  • title_color - Card's title color (hex color)
  • text_color - Body text color (hex color)
  • icon_color - Icons color if available (hex color)
  • bg_color - Card's background color (hex color)
  • custom_title - Add the custom title to the channel card (use %20 to add space)
  • cache_seconds - set the cache header manually (min: 1800, max: 86400)

. . .

YouTube Video Stats

![Dhyey's youtube video stats](https://youtube-stats-card.vercel.app/api/video?videoid=4vwZNTagHsQ&layout=compact)
Enter fullscreen mode Exit fullscreen mode

The above link will generate the following stats card having layout as compact and color theme as default:

Dhyey's youtube video stats

You can also customize the appearance of your Video Stats Card with the following URL query params:

  • layout - Default, Compact (name)
  • hide_icons - Hide the icons from video card (boolean)
  • hide_preview - Hide the video preview from video card (boolean)
  • theme - Name of the theme, choose from all available themes
  • hide_border - Hides the card's border (boolean)
  • title_color - Card's title color (hex color)
  • text_color - Body text color (hex color)
  • icon_color - Icons color if available (hex color)
  • bg_color - Card's background color (hex color)
  • hide_channelname - Hide the channel name in video card (boolean)
  • cache_seconds - set the cache header manually (min: 1800, max: 86400)

I hope you guys liked the project ✌. And make sure to give it a star on Github ⭐.

. . .

To view all the live demos, check out the github repo:

GitHub logo Dhyeythumar / youtube-stats-card

🚀 Dynamic YouTube Stats Card for your github readmes & websites.

YouTube Stats Card

YouTube Stats Card

Get dynamically generated YouTube Stats Cards for your github readmes & websites!

View Demo · Report Bug · Request Feature

What’s In This Document

YouTube Channel Stats Card

Usage

[![Dhyey's youtube stats](https://youtube-stats-card.vercel.app/api?channelid=UCpKizIKSk8ga_LCI3e3GUig)](https://www.youtube.com/channel/UCpKizIKSk8ga_LCI3e3GUig)
Enter fullscreen mode Exit fullscreen mode

Change the ?channelid= value to your YouTube Channel ID.

Check out this to get your youtube channel id.

Layout Demos

Below layouts uses default parameters*

Layouts Preview
Default Layout Dhyey's youtube stats
Center Layout &layout=center Dhyey's youtube stats
Exruded Layout &layout=extruded Dhyey's youtube stats

Customization

All the Customizations are applied to the default layout*

Parameters Preview
Hide Icons &hide_icons=true Dhyey's youtube stats
Hide Logo &hide_logo=true Dhyey's youtube stats
Color Theme &theme=THEME_NAME Dhyey's youtube stats
Hide Border &hide_border=true Dhyey's youtube stats
Manual Color Theme &title_color=cbf7db&icon_color=99ffbe
&text_color=fffefe&bg_color=40423e
Dhyey's youtube stats
Custom Title custom_title=My%20Channel%20Name Dhyey's youtube stats

Check all the available color themes here or checkout the theme config file & you can also contribute new themes…

Discussion (0)

pic
Editor guide