How to Add an Embedded Video to Github Readme Files
First of all, I am so sorry for situation in Rafah, Gaza, Palestine. Let’s call for an immediate ceasefire and urge the allowance of humanitarian aid. Let Palestine be free from genocide.
Hi everyone 🖐. In this article, I wanna show to you how you can add an embedded video into your readme files easily.
When you added a video to your readme file as below
- Option One
[![Now in Android: 55] // Title
(https://i.ytimg.com/vi/Hc79sDi3f0U/maxresdefault.jpg)] // Thumbnail
(https://www.youtube.com/watch?v=Hc79sDi3f0U "Now in Android: 55") // Video Link- Option Two
[<img src="https://i.ytimg.com/vi/Hc79sDi3f0U/maxresdefault.jpg" width="50%">](https://www.youtube.com/watch?v=Hc79sDi3f0U "Now in Android: 55")you will see a view as below. When a user clicks a thumbnail that exists in your readme file the user will be navigated to another website.
Actually, this is not an embedded video because for watching the video user must navigate to another website, and of course, we don’t want this in order to don’t lose the focus of the user.
So how we should add an embedded video? Dou you ready for the magic words??
Just “ Drag & Drop” 😄
In this way, you can add an embedded video to your readme files easily without losing users' focus because they will not go to another website for viewing your video. And this video view can be collapsed- expanded. And also your users can change the volume of the video and watch your video on full screen.
You can also add your images with this method.
Keep in mind the maximum file size is 10MB for images and gifs. 10MB for videos on a free GitHub plan. 100MB for videos on a paid GitHub plan.
Finally, I wanna suggest that use the GitHub website (such as I showed in the gifs) instead Markdown plugin with Intellij IDE when you prepare a readme file for your repo. Because sometimes it is not working properly and features such as drag & drop is not supported for videos (The plugin supports drag & drop for images). This feature is provided by the Github website. That’s why the result of the same readme file might be different in Intellij IDE and the Github website. I wasted my time by using the plugin.
Conclusion
We learned how we can add a real embedded video to our readme files easily by Drag & Drop feature provided by Github. If you like the article please clap the article and share it. See you in the next articles. Stay tuned.
