HTML Media Elements

Media and embedded HTML elements are available through the rx.el namespace.

API Reference

Shared HTML props

Components linked to this section accept these HTML props. Component-specific additions and overrides are listed below.

Props

Prop	Type	Description
`access_key`	`str`	Provides a hint for generating a keyboard shortcut for the current element.
`auto_capitalize`	`"off""none""on""sentences""words""characters"`	Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
`content_editable`	`"inherit""plaintext-only"`	Indicates whether the element's content is editable.
`context_menu`	`str`	Defines the ID of a <menu> element which will serve as the element's context menu.
`dir`	`str`	Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
`draggable`	`bool`	Defines whether the element can be dragged.
`enter_key_hint`	`"enter""done""go""next""previous""search""send"`	Hints what media types the media element is able to play.
`hidden`	`bool`	Defines whether the element is hidden.
`input_mode`	`"none""text""tel""url""email""numeric""decimal""search"`	Defines the type of the element.
`item_prop`	`str`	Defines the name of the element for metadata purposes.
`lang`	`str`	Defines the language used in the element.
`role`	`"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"`	Defines the role of the element.
`slot`	`str`	Assigns a slot in a shadow DOM shadow tree to an element.
`spell_check`	`bool`	Defines whether the element may be checked for spelling errors.
`tab_index`	`int`	Defines the position of the current element in the tabbing order.
`title`	`str`	Defines a tooltip for the element.

rx.el.area

Display the area element.

Props

Prop	Type	Description
`alt`	`str`	Alternate text for the area, used for accessibility.
`coords`	`str`	Coordinates to define the shape of the area.
`download`	`Union[str, bool]`	Specifies that the target will be downloaded when clicked.
`href`	`str`	Hyperlink reference for the area.
`href_lang`	`str`	Language of the linked resource.
`media`	`str`	Specifies what media/device the linked resource is optimized for.
`referrer_policy`	`"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"`	Specifies which referrer information to send with the link.
`rel`	`str`	Specifies the relationship of the target object to the link object.
`shape`	`str`	Defines the shape of the area (rectangle, circle, polygon).
`target`	`str`	Specifies where to open the linked document.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.audio

Display the audio element.

Props

Prop	Type	Description
`auto_play`	`bool`	Specifies that the audio will start playing as soon as it is ready.
`controls`	`bool`	Displays the standard audio controls.
`cross_origin`	`"anonymous""use-credentials"""`	Configures the CORS requests for the element.
`loop`	`bool`	Specifies that the audio will loop.
`muted`	`bool`	Indicates whether the audio is muted by default.
`preload`	`str`	Specifies how the audio file should be preloaded.
`src`	`str`	URL of the audio to play.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.canvas

Display the canvas element.

Props

No component specific props

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.embed

Display the embed element.

Props

Prop	Type	Description
`src`	`str`	URL of the embedded content.
`type`	`str`	Media type of the embedded content.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.iframe

Display the iframe element.

Props

Prop	Type	Description
`allow`	`str`	Permissions policy for the iframe.
`loading`	`"eager""lazy"`	Specifies the loading behavior of the iframe.
`name`	`str`	Name of the iframe, used as a target for hyperlinks and forms.
`referrer_policy`	`"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"`	Referrer policy for the iframe.
`sandbox`	`str`	Security restrictions for the content in the iframe.
`src`	`str`	URL of the document to display in the iframe.
`src_doc`	`str`	HTML content to embed directly within the iframe.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.img

Display the img element.

Props

Prop	Type	Description
`alt`	`str`	Alternative text for the image.
`cross_origin`	`"anonymous""use-credentials"""`	Configures the CORS requests for the image.
`decoding`	`"async""auto""sync"`	How the image should be decoded.
`loading`	`"eager""lazy"`	Specifies the loading behavior of the image.
`referrer_policy`	`"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"`	Referrer policy for the image.
`sizes`	`str`	Sizes of the image for different layouts.
`src`	`Any`	URL of the image to display.
`src_set`	`str`	A set of source sizes and URLs for responsive images.
`use_map`	`str`	The name of the map to use with the image.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.math

Display the math element.

Represents a mathematical expression.

Props

No component specific props

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.meta

Display the meta element.

Props

Prop	Type	Description
`char_set`	`str`	Specifies the character encoding for the HTML document.
`content`	`str`	Defines the content of the metadata.
`http_equiv`	`str`	Provides an HTTP header for the information/value of the content attribute.
`name`	`str`	Specifies a name for the metadata.
`property`	`str`	The type of metadata value.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.object

Display the object element.

Props

Prop	Type	Description
`data`	`str`	URL of the data to be used by the object.
`form`	`str`	Associates the object with a form element.
`name`	`str`	Name of the object, used for scripting or as a target for forms and links.
`type`	`str`	Media type of the data specified in the data attribute.
`use_map`	`str`	Name of an image map to use with the object.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.picture

Display the picture element.

Props

No component specific props

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.source

Display the source element.

Props

Prop	Type	Description
`media`	`str`	Media query indicating what device the linked resource is optimized for.
`sizes`	`str`	Sizes of the source for different layouts.
`src`	`str`	URL of the media file or an image for the element to use.
`src_set`	`str`	A set of source sizes and URLs for responsive images.
`type`	`str`	Media type of the source.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.track

Display the track element.

Props

Prop	Type	Description
`default`	`bool`	Indicates that the track should be enabled unless the user's preferences indicate otherwise.
`kind`	`str`	Specifies the kind of text track.
`label`	`str`	Title of the text track, used by the browser when listing available text tracks.
`src`	`str`	URL of the track file.
`src_lang`	`str`	Language of the track text data.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

rx.el.video

Display the video element.

Props

Prop	Type	Description
`auto_play`	`bool`	Specifies that the video will start playing as soon as it is ready.
`controls`	`bool`	Displays the standard video controls.
`cross_origin`	`"anonymous""use-credentials"""`	Configures the CORS requests for the video.
`loop`	`bool`	Specifies that the video will loop.
`muted`	`bool`	Indicates whether the video is muted by default.
`plays_inline`	`bool`	Indicates that the video should play 'inline', inside its element's playback area.
`poster`	`str`	URL of an image to show while the video is downloading, or until the user hits the play button.
`preload`	`str`	Specifies how the video file should be preloaded.
`src`	`str`	URL of the video to play.

Also accepts the shared HTML props.

Event Triggers

See the full list of default event triggers

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

HTML Media Elements

API Reference

Shared HTML props

Props

rx.el.area

Props

Event Triggers

rx.el.audio

Props

Event Triggers

rx.el.canvas

Props

Event Triggers

rx.el.embed

Props

Event Triggers

rx.el.iframe

Props

Event Triggers

rx.el.img

Props

Event Triggers

rx.el.math

Props

Event Triggers

rx.el.meta

Props

Event Triggers

rx.el.object

Props

Event Triggers

rx.el.picture

Props

Event Triggers

rx.el.source

Props

Event Triggers

rx.el.track

Props

Event Triggers

rx.el.video

Props

Event Triggers