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
β‘οΈ Videos are rendered differently and the process varies from one framework to another.
Learn how to embed videos in your @Gatsbyjs sites
π Use `gatsby-remark-embed-video` plugin
π With easy config options
Wrote an in-depth tutorial @scotch_io β¬οΈ
scotch.io/tutorials/embeβ¦13:35 PM - 09 Oct 2019
1
1
Top comments (2)
gatsby-remark-embed-videodoes not requiregatsby-remark-responsive-iframeto work. On my setupgatsby-remark-embed-videoworks fine withoutgatsby-remark-responsive-iframe.I guess
gatsby-remark-embed-videodoes not depend ongatsby-remark-imageseither (although I have not tested it yet).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.