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 (https://theme-ui.com/). 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.

Copycopy code to clipboard
1<iframe
2  width="50%"
3  height="300px"
4  src="https://www.youtube.com/embed/-tnRacd7Xcw"
5  frameborder="0"
6  allow="accelerometer; picture-in-picture"
7  allowfullscreen
8></iframe>

Changed above code to code below.

Copycopy code to clipboard
1<Card
2  sx={{
3    maxWidth: 512,
4  }}
5>
6  <iframe
7    width="100%"
8    height="300px"
9    src="https://www.youtube.com/embed/-tnRacd7Xcw"
10    frameborder="0"
11    allow="accelerometer; picture-in-picture"
12    allowfullscreen
13  ></iframe>
14</Card>

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