Skip to content
Chandan Kumar

Gatsby Tutorial: Embed responsive youtube video

reactjs, gatsby1 min read

A short (video) tutorial on how to embed a responsive Youtube video in Gatsby blog using theme-ui. This blog is based on Lekoarts, which uses theme-ui library for styling ( To resolve this I used Card Component with fixed max width and embed youtube iframe inside. It's a quick hack and it's not bad if not the most elegant one.

Refer to the code change below.

2 width="50%"
3 height="300px"
4 src=""
5 frameborder="0"
6 allow="accelerometer; picture-in-picture"
7 allowfullscreen

Changed above code to code below.

2 sx={{
3 maxWidth: 512,
4 }}
6 <iframe
7 width="100%"
8 height="300px"
9 src=""
10 frameborder="0"
11 allow="accelerometer; picture-in-picture"
12 allowfullscreen
13 ></iframe>

At some point of time I would like to use front-matter instead of repeating this over and over again in every video.


Copyleft. WTH
Theme by LekoArts