Home | Blog
Last Updated: 28/Apr/2020

Simplify embedding a YouTube video into GitHub

Added on 28/Apr/2020



What?

I recently wanted to embed a YouTube video inside a GitHub's project README.md. The solutions available suggest to either link a thumnail from the video or to take a screenshot of the player, host it somewhere and then link it.

Here's a example of a said direct thumbnail embed:

Example of direct YouTube image embed
Fig.1 - Example of direct YouTube image embed.
[![](http://img.youtube.com/vi/3BYNj6Yvl8I/0.jpg)](http://www.youtube.com/watch?v=3BYNj6Yvl8I "")

As can be seen, the video link doesn't have many visual cues/affordance to indicate that it's actually a video and not an image.

Introducing yt-embed

Example of yt-embed
Fig.2 - yt-embed.

I created yt-embed to address this problem, you can try it directly on: https://yt-embed.herokuapp.com/.

It tries to mimic the look of how a YouTube embed looklike. Usage is straightforward, similar to the above but replace the image link with: https://yt-embed.herokuapp.com/embed?v=3BYNj6Yvl8I, so that could would look like:

[![](https://yt-embed.herokuapp.com/embed?v=3BYNj6Yvl8I)](http://www.youtube.com/watch?v=3BYNj6Yvl8I "")
Here's how it'll render:
Example of yt-embed
Fig.3 - Example of yt-embed.

Conclusion

There are a couple of features that can be added: ability to choose the size of the thumnail to render, mobile feel...
If you have feedback/suggestions, please check the repository here or try it directly here.




✉️ Subscribe via email
Thanks for Subscribing!
Subscription failed. Please try again later.



Pssst ... If you enjoyed this, make sure to check my other app: Quoter.

Quoter
Fig. Quoter App.

It simplifies saving quotes (one click away) and will show you a saved quote based on an interval that you specify. Here's a demo for it.