Zoomable Frame
Zoomable frames render iframe content with zoom and interaction controls.
ZoomableFrame( _.src := "https://webawesome.com/", _.zoom := 0.5)()Examples
Loading external content
Use the src attribute to embed external websites or resources. The URL must be accessible, and cross-origin restrictions may apply due to the Same-Origin Policy, potentially limiting access to the iframe's content.
ZoomableFrame(_.src := "https://example.com/")()Custom aspect ratio
The zoomable frame fills 100% width by default with a 16:9 aspect ratio. Customize this using the aspect-ratio CSS property.
ZoomableFrame(_.src := "https://example.com/")( styleAttr := "aspect-ratio: 4/3;")Inline HTML content
Use the srcdoc attribute or property to display custom HTML content directly within the iframe, perfect for rendering inline content without external resources.
ZoomableFrame( _.srcdoc := "<html><body><h1>Hello, World!</h1><p>This is inline content.</p></body></html>")()Controlling zoom behavior
Set the zoom attribute to control the frame's zoom level. Use 1 for 100%, 2 for 200%, 0.5 for 50%, and so on. Define specific zoom increments with the zoom-levels attribute using space-separated percentages and decimal values.
ZoomableFrame( _.src := "https://webawesome.com/", _.zoom := 0.5, _.zoomLevels := "50% 0.75 100%")()Hiding zoom controls
Add the without-controls attribute to hide the zoom control interface from the frame.
ZoomableFrame( _.src := "https://webawesome.com/", _.withoutControls := true, _.zoom := 0.5)()Preventing user interaction
Apply the without-interaction attribute to make the frame non-interactive. Note that this prevents keyboard navigation into the frame, which may impact accessibility for some users.
ZoomableFrame( _.src := "https://webawesome.com/", _.zoom := 0.5, _.withoutInteraction := true)()