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

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.

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.

Comments

Copyleft. WTH
Theme by LekoArts