DEV Community

Ryoichi Homma
Ryoichi Homma

Posted on • Updated on

How to Customize GitHub Profile: Part 3

Welcome back to the third part of my series on customizing your GitHub profile! In this article, we'll focus on the featured source section where you can showcase your project demo videos and any other relevant contents. In particularly, highlighting your YouTube channel can help visitors better understand your work, skills, and personality through engaging visual content.
Part 1, Part 2, Part 4.
Example Image

Add YouTube Videos and Why

Adding YouTube videos to your GitHub profile is a great way to provide dynamic content, which showcases your projects and tutorials in action.

  1. Visual Demos: Videos offer a more comprehensive demonstration of your projects.
  2. Engagement: Videos can engage your audience more effectively than text alone.
  3. Credibility: Sharing tutorials and project walkthroughs enhances your credibility as a developer.

Setting Up the YouTube Section

To upload YouTube videos, you can use markdown to embed YouTube video links. You can also use images or thumbnails as links to your videos for a more visual appeal. Here're some examples of how to set it up:

  1. Simple way using the following syntax shows only image or thumbnail like this. [![Title](image or thumbnail link)](source link) Example Image2
  2. Professional way using the following syntax shows every details of the featured source such as title, view counts, video length, and posted date. This way is recommended for YouTube videos.
<a href="https://www.youtube.com/watch?v=YOUR_YOUTUBE_VIDEO_ID">
    <img src="https://ytcards.demolab.com/?id=YOUR_YOUTUBE_VIDEO_ID&title=VIDEO_TITLE&lang=en&timestamp=UNIX_TIMESTAMP&background_color=%230d1117&title_color=%23ffffff&stats_color=%23dedede&duration=VIDEO_LENGTH>
</a>
Enter fullscreen mode Exit fullscreen mode
  • YouTube Video ID: You can find your video id at the end of video link.
  • Timestamp: You can set up the posted date using a Unix Timestamp, an integer representing the number of seconds that have elapsed since the Unix epoch. To calculate a Unix Timestamp of your video, visit UNIX Timestamp Convertor.
  • Duration Duration is the length of your video, needs to represent in second.
  • Configuration is needed if you follow the professional way to automatically update the view counts and posted date of the video. Here's a step-by-step guide of the advanced configuration explained by my favorite developer, Jonah Lawrence. Image Example3

Wrapping Up

In this part, we focused on how to add the featured source section to your GitHub profile. By embedding videos and using thumbnails, you can create an engaging and informative section that highlights your work and abilities effectively. Stay tuned for the next part, where we'll explore showcasing Contribution Animation.

As always, feel free to ask any questions or share your GitHub profiles in the comments below. Let's connect and grow together🌱

Happy coding!💻

References

GitHub Readme YouTube Cards
Jonah Lawrence's Repository

Other Parts

Part 1, Part 2, Part 4.

Top comments (0)