a tool for shared writing and social publishing
pass aspect ratio to published iframes
Jared Pereira
(Apr 11, 2026, 5:01 PM EDT)
a522e97e
f9dd2514
+8
-3
+8
-3
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+8
-3
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
209
209
<PublishedIframeBlock
210
210
url={b.block.url}
211
211
height={b.block.height}
212
+
aspectRatio={b.block.aspectRatio}
212
213
pageId={pageId}
213
214
/>
214
215
);
···
491
492
function PublishedIframeBlock(props: {
492
493
url: string;
493
494
height?: number;
495
+
aspectRatio?: PubLeafletBlocksIframe.AspectRatio;
494
496
pageId?: string;
495
497
}) {
496
498
let parentPage = props.pageId
···
518
520
);
519
521
520
522
523
+
let aspectRatio = props.aspectRatio
524
+
? `${props.aspectRatio.width}/${props.aspectRatio.height}`
525
+
: undefined;
526
+
521
527
return (
522
528
<iframe
523
529
ref={iframeRef}
524
-
className="flex flex-col relative w-full overflow-hidden group/embedBlock block-border my-2"
525
-
width="100%"
526
-
height={props.height}
530
+
className={`relative w-full overflow-hidden group/embedBlock block-border my-2 ${aspectRatio ? "h-auto" : ""}`}
531
+
style={aspectRatio ? { aspectRatio } : { height: props.height }}
527
532
src={iframeSrc.toString()}
528
533
allow="fullscreen"
529
534
loading="lazy"