chore(YouTube): match with dev branch to prevent regression

Author: TylerAPfledderer

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>
   )
 }