Gatsby-theme-novela: How to embed Youtube and Twitter ?

[mostafachatillon]

Hi, I want to embed Youtube videos and Twitter tweets in my blog posts, how to proceed?

I checked Gatsby MDX but it does not seem to be supported by Novela.

[valtteriak]

I have the same question... Would like to know

[aleccool213]

The gatsby-remark-oembed plugin has been added to this theme recently. It supports embedding content like this.

• I don't think it has been tested to see if it works
• The config is not dynamic and doesn't support adding any type of content. Only supports Instagram right now. Someone should make a pr to make it a config which a user of the theme defines.

ref: https://github.com/narative/gatsby-theme-novela/blob/f4030901254104d457c7c11ee29881aa3553e140/%40narative/gatsby-theme-novela/gatsby-config.js#L207

[mostafachatillon]

Thank you @aleccool213, so what is the best practice to embed a YouTube video now ? (Maybe without MDX). For example, what about gatsby-remark-embed-video ?

https://github.com/narative/gatsby-theme-novela/blob/f4030901254104d457c7c11ee29881aa3553e140/%40narative/gatsby-theme-novela/gatsby-config.js#L221

[aleccool213]

I am new to Gatsby themes so I don’t know how plug-ins work entirely within that context. If a plugin is defined in your Gatsby site while using Novela, some work, some don’t. I think the ones which do not work are the ones that have to do with creating pages.

[mostafachatillon]

I tried gatsby-remark-embed-video and I got an issue (but I am new to Gatsby too): https://github.com/borgfriend/gatsby-remark-embed-video/issues/49

[mostafachatillon]

A temporary hack is to simply make a Youtube embed with iframe, and add style="margin:0 auto;", like this:

<iframe style="margin:0 auto;" src="https://www.youtube.com/embed/783ccP__No8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

It was mentioned here: https://github.com/narative/gatsby-theme-novela/issues/195

The remaining issue is then to make the iframe responsive for mobile.

Youtube embedding is very important nowadays, so it should be supported natively.

[brotzky]

We've added embed features for social/videos.

[mostafachatillon]

@brotzky thanks, how to use this feature?

[thtmnisamnstr]

@mostafachatillon Details on how to embed social content is in this PR.