refactor(youtube): use AspectRatio as wrapper

Author: TylerAPfledderer

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -58,12 +58,6 @@ const styles = {
     "li > p": {
       "margin-bottom": "calc(1.45rem / 2)",
     },
-    // YouTube embeds
-    iframe: {
-      display: "block",
-      maxWidth: "560px",
-      margin: "32px 0",
-    },
     // should be replace by the usage of https://chakra-ui.com/docs/components/heading
     // also, the media queries defined on each of these heading tags are bearly used
     "h1,h2,h3,h4,h5,h6": {

src/components/YouTube.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box } from "@chakra-ui/react"
+import { AspectRatio } from "@chakra-ui/react"
 
 /**
  * @param {id} ID of the YouTube video
@@ -22,10 +22,8 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
   const baseUrl = "https://www.youtube.com/embed/"
   const src = baseUrl + id + startQuery
   return (
-    <Box as="figure" display="block" my={4}>
+    <AspectRatio as="figure" maxW="560px" ratio={16 / 9} my={8}>
       <iframe
-        width="100%"
-        height="315"
         src={src}
         frameBorder="0"
         title={title}
@@ -37,8 +35,8 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
       gyroscope;
       picture-in-picture"
         allowFullScreen
-      ></iframe>
-    </Box>
+      />
+    </AspectRatio>
   )
 }