Iframe

Available as: Web ComponentShortcode

A wrapper around a standard iframe element, which scales proportionally to its parent. Great for showing desktop versions of a website on smaller screens or viewports.

<spx-iframe style="max-height: 400px" fit src="{{ site.url }}" size="1920px"> </spx-iframe>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-iframe-display

Component display property.

document-border

Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border

Document border.

document-border-radius

Type: stringDefault: 'none'CSS variable: --spx-iframe-document-border-radius

Document radius border.

document-height

Type: stringDefault: 'auto'

document-width

Type: stringDefault: '100%'

fit

Type: boolean

Automatically resize iframe to fit content.

lazy

Type: boolean

Lazy load content.

size

Type: stringDefault: '1440px'

Screen size of the site shown inside the iframe.

src

Type: stringDefault: 'https://spx.dev'

Source for the iframe.

type

Type: stringDefault: 'resize'Choices: 'resize', 'document', 'default'

Screen size of the site shown inside the iframe.

Events

spxIframeDidLoad

Fires after component has loaded.

Methods

reload

Reload component.