EmbedFrame

import ui/theme.qwe use theme_cssuse ui/embed_frame.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view EmbedFrameDemo() =    <div.demo-stack>        <EmbedFrame src="https://www.openstreetmap.org/export/embed.html?bbox=-9.1700,38.7000,-9.1200,38.7300&layer=mapnik"                    title="Map of central Lisbon" ratio="21/9" fullscreen={true} allow="fullscreen"/>        <div.demo-row style="align-items: flex-start">            <EmbedFrame src="/?only=button" title="The Button component, in a frame" ratio="4/3" width="320px"/>            <EmbedFrame src="/?only=badge&theme=dark" title="The Badge component, dark" height="200px" width="320px"                        sandbox="allow-scripts allow-same-origin"/>        </div>        <p.demo-note>A frame keeps its ratio as the page narrows; the last one has a fixed height instead.</p>    </div>

// EmbedFrame: another page in a frame that keeps a shape and fills its width:// a map, a video from a service, a document, a demo.////   <EmbedFrame src="https://www.openstreetmap.org/export/embed.html?bbox=-9.17,38.70,-9.12,38.73" title="Map of Lisbon"/>//   <EmbedFrame src="https://player.vimeo.com/video/1" title="The film" allow="autoplay; fullscreen" fullscreen={true}/>//// src: the page. title (required): what it is, for screen readers.// ratio: the frame's shape, "16/9" (default), "4/3", "1", "21/9"; or height, as// CSS ("480px"), for a fixed height instead. allow: the frame's permissions// policy ("fullscreen; picture-in-picture"). fullscreen: it may go full screen.// sandbox: restrictions, as the attribute takes them ("allow-scripts// allow-same-origin"); none by default. lazy: loaded when scrolled near (true).// width: as CSS; it fills its container by default.import ui/theme.qwe use ui_clslet embed_frame_css = css`.ui-embed-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r, 16/9); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-subtle); }.ui-embed-frame-fixed { aspect-ratio: auto; height: var(--h); }.ui-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }`view EmbedFrame(src: str, title: str, ratio: str = "16/9", height: str? = null, allow: str? = null, fullscreen: bool = false,                sandbox: str? = null, lazy: bool = true, width: str? = null, class: str? = null) {    style global embed_frame_css    <div class={ui_cls(["ui-embed-frame", height != null && "ui-embed-frame-fixed", class])}         style={`${height != null ? `--h: ${height}` : `--r: ${ratio}`}${width != null ? `; width: ${width}` : ""}`}>        <iframe src={src} title={title} loading={lazy ? "lazy" : null} allow={allow} allowfullscreen={fullscreen}                sandbox={sandbox} referrerpolicy="strict-origin-when-cross-origin"></iframe>    </div>}