💄(frontend) embed-block: add aspect ratio constraint to resize

Author: ThomasMetzger

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx

@@ -50,23 +50,37 @@ export const IFrameViewer = (
   >,
 ) => {
   const url = props.block.props.url;
+  const aspectRatio = props.block.props.aspectRatio || 16 / 9;
 
   const [iframeError, setIframeError] = useState(false);
   if (!url) {
     return <Box>No URL provided for embed.</Box>;
   }
 
   return !iframeError ? (
-    <iframe
-      src={url}
-      className="bn-visual-media"
+    <div
       style={{
-        height: '300px',
+        position: 'relative',
+        width: '100%',
+        paddingTop: `${100 / aspectRatio}%`, // padding-top sets height relative to width
       }}
-      allowFullScreen
-      title="Embedded content"
-      onError={() => setIframeError(true)}
-    />
+    >
+      <iframe
+        src={url}
+        className="bn-visual-media"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: 'none',
+        }}
+        allowFullScreen
+        title="Embedded content"
+        onError={() => setIframeError(true)}
+      />
+    </div>
   ) : (
     <Box
       $css={css`