Embedding Videos in Your Gatsby.js Sites

This piece will help you learn how to embed videos in Gatsby.js sites through remark plugins. I have written an in-depth tutorial featuring how the gatsby-remark-embed-video plugin works and makes it easier for you to source videos from multiple host.

Media elements like images, videos, and GIFs in blog posts and websites are becoming prominent day by day. Also, Gatsby-powered websites are the recent trend and people are very excited about #JAMstack.

When we talk about embedding/rendering these media elements we find different ways of doing it. Moreover, the process is not the same. It varies from one framework to another.

Talking about Gatsby specifically, then videos can be embedded either through a custom solution or by using remark plugins.

I’ll be sharing an easier way of doing it. There is this incredible Gatsby plugin called gatsby-remark-embed-video which helps you embed videos from multiple video hosts like YouTube, Vimeo, etc.

I have written an in-depth tutorial where you can learn the entire process. You can find it here →

Go through it and trying adding videos yourself. Let me know if you come across any difficulty. I’ll be glad to assist.

I also tweeted about it and you can follow me @MaeadhBatool


Maedah Batool

ⓦ WordPress Marketing Team Representative & WP Core Contributing Developer ❯ 🎩 #OpenSourceress ❯ ✍️ Tech Journalist, Developer & Teacher ❯ 👩‍💻 OSS Content Program Manager at TheDevCouple ❯ 👩‍🏫 Taught thousands of girls how to code #GirlsWhoCode ❯ 💜 Love my husband (Ahmad Awais), Minions, and 🍕

WPCouple Partner:

Leave a Reply