DEV Community

Maedah Batool πŸ‘©β€πŸ’»
Maedah Batool πŸ‘©β€πŸ’»

Posted on • Originally published at scotch.io

Embedding Videos in Your Gatsby.js Sites

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

Top comments (2)

Collapse
 
weakish profile image
Jang Rush • Edited

Moreover, the plugin is designed to embed videos in markdown which means it requires some pre-requisite plugins as well i.e.,

gatsby-remark-responsive-iframe: ...
gatsby-transformer-remark: ...
gatsby-remark-images: ...

gatsby-remark-embed-video does not require gatsby-remark-responsive-iframe to work. On my setup gatsby-remark-embed-video works fine without gatsby-remark-responsive-iframe.

I guess gatsby-remark-embed-video does not depend on gatsby-remark-images either (although I have not tested it yet).

Collapse
 
dance2die profile image
Sung M. Kim

Hey Maedah.

This looks like a good post here. You think you might be able to share this in full on DEV?

DEV generally asks that folks share their posts in full if possible and there is tooling provided (dev.to/settings/publishing-from-rss) to make it so that it's relatively easy to repost from outside blogs.

Hope you'll consider sharing the full post going forward.