Embedding Videos in Your Gatsby.js Sites
Maedah Batool 👩‍💻

Maedah Batool 👩‍💻 @maedahbatool

About: ⓦ WordPress Marketing Team Representative & WP Core Contributing Developer ❯ 🎩 #OpenSourceress ❯ ✍️ Tech Journalist ❯ 👩‍🏫Teacher at #GirlsWhoCode

Joined:
Sep 20, 2017

Embedding Videos in Your Gatsby.js Sites

Publish Date: Oct 9 '19
8 2

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

Comments 2 total

  • Sung M. Kim
    Sung M. KimOct 9, 2019

    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.

  • Jang Rush
    Jang RushJul 13, 2020

    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).

Add comment