diff --git a/src/components/embed-modal.css b/src/components/embed-modal.css index 878bad57..44f79ee8 100644 --- a/src/components/embed-modal.css +++ b/src/components/embed-modal.css @@ -22,6 +22,10 @@ iframe { pointer-events: auto; max-width: 100%; + max-height: 100%; + width: max(var(--width), 480px); + height: auto; + aspect-ratio: var(--aspect-ratio); } } } diff --git a/src/components/embed-modal.jsx b/src/components/embed-modal.jsx index 2fe764f8..f38e1556 100644 --- a/src/components/embed-modal.jsx +++ b/src/components/embed-modal.jsx @@ -2,7 +2,7 @@ import './embed-modal.css'; import Icon from './icon'; -function EmbedModal({ html, url, onClose = () => {} }) { +function EmbedModal({ html, url, width, height, onClose = () => {} }) { return (
@@ -20,7 +20,15 @@ function EmbedModal({ html, url, onClose = () => {} }) { )}
-
+
); } diff --git a/src/components/modals.jsx b/src/components/modals.jsx index 7b277490..75de5abb 100644 --- a/src/components/modals.jsx +++ b/src/components/modals.jsx @@ -210,6 +210,8 @@ export default function Modals() { { states.showEmbedModal = false; }} diff --git a/src/components/status.jsx b/src/components/status.jsx index 158bfa5f..2549d0bd 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -2103,6 +2103,8 @@ function Card({ card, selfReferential, instance }) { states.showEmbedModal = { html, url: url || embedUrl, + width, + height, }; } },