fix youtube video overflow issue

Author: bibakroy

src/Content/Embed/EmbedVideo.tsx

@@ -37,11 +37,13 @@ function ThumbnailWrapper({
       onClick={() => setHideThumbnail(true)}
       onError={() => setError(true)}
       style={{
-        width: adjustedWidth,
-        height: adjustedHeight,
-        backgroundImage: `url(${error ? discordImageFailure : thumbnail})`,
+        width: "100%",
+        height: "auto",
+        maxWidth: adjustedWidth,
+        maxHeight: adjustedHeight,
       }}
     >
+      <Styles.Image src={error ? discordImageFailure : thumbnail} />
       <Styles.VideoThumbnailPlayButtonContainer>
         <Styles.VideoThumbnailPlayButton
           width={12}
@@ -61,6 +63,13 @@ interface EmbedVideoProps
 }
 
 function EmbedVideo(props: EmbedVideoProps) {
+  const { width: adjustedWidth, height: adjustedHeight } = useSize(
+    props.width,
+    props.height
+  );
+
+  console.log({ props, adjustedWidth, adjustedHeight });
+
   if (props.proxyUrl)
     return (
       <ThumbnailWrapper
@@ -94,8 +103,12 @@ function EmbedVideo(props: EmbedVideoProps) {
       height={props.height}
     >
       <Styles.VideoIframe
-        width={400}
-        height={225}
+        width="100%"
+        height="100%"
+        style={{
+          maxWidth: adjustedWidth,
+          maxHeight: adjustedHeight,
+        }}
         src={url.toString()}
         allowFullScreen={true}
       />