> For the complete documentation index, see [llms.txt](https://docs.flexmoney.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexmoney.uk/documentation/draftbit/media.md). # Media Components that help further define the structure and feel of the screen. A component for displaying different types of images. > ## ❗️Make sure the Image file name begins with a letter, not a number! | Parameter | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Image Source** | Select an image that has been uploaded to the builder or upload a new one. | | **Resize Mode** | Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the `Resize Mode` table below to learn more about each setting. | [React Native Docs](https://facebook.github.io/react-native/docs/image.html)\ [Expo Docs](https://docs.expo.io/versions/latest/react-native/image/) A component that allows you to set a background image to cover the entire screen. > ## ❗️Make sure the Image file name begins with a letter, not a number! | Parameter | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Image Source** | Select an image that has been uploaded to the builder. | | **Overflow** | Allows you to set the behavior of the image when it extends beyond the boundaries of the container. | | **Resize Mode** | Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the `Resize Mode` table below to learn more about each setting. | [React Native Docs](https://facebook.github.io/react-native/docs/imagebackground)\ [Expo Docs](https://docs.expo.io/versions/v31.0.0/react-native/imagebackground/#__next) A component that displays a video. > ## ❗️YouTube videos are not currently supported. Please use a video in a `.mp4` or `.mov` format. | Parameter | Description | | ----------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **Playback Rate** | Set a number between 0 and 32 to control the playback rate of the video. | | **Video URL** | Paste the URL of the video to be loaded into the component. | | **Volume** | Allows you to set a number between 0 (mute) and 1 (maximum) to control the video audio, defaults to .5. | | **Mute** | Enable to mute the video. | | **Allow Looping** | Enable to loop the video. | | **Use Thumbnail** | Enable so that a thumbnail will appear when the video is not playing. | | **Resize Mode** | How the video will be resized when its dimensions set for the component don't match the actual dimensions of the video. | | **Play on Load** | Enable so that the video will play when loaded. | | **Thumbnail Source** | Select an image that has been uploaded to the builder or upload a new one to be used as a thumbnail for the video. | | **Starting Point** | Set the time the video will begin to play. | | **Use Native Controls** | Enable to give users the ability to play/pause the video. | [Expo Docs](https://docs.expo.io/versions/v30.0.0/sdk/video/#__next) A component that renders a website on the screen in a native view. | Parameter | Description | | -------------------------------- | --------------------------------------------------------------------------------------------------------------- | | **Website url** | The url of the page to be loaded in the Web View | | **Scroll Bounce** | Enable so that the page slightly bounces once the user reaches the top or the bottom of the page. | | **Content Inset** | The amount of padding applied to the web content inside the Web View container. | | **Scrollable** | Enable or disable scrolling in the Web View. | | **Scale Page to Fit** | Enable so that the website automatically scales itself down to fit the size of the web view. | | **Inline Video Playback** | When enabled, HTML5 videos will play as they would in a normal browser instead of the native, full-screen mode. | | **User Controls Media Playback** | Enable to allow the user is able to control when video or audio on the screen plays/stops. | [React Native Docs](https://facebook.github.io/react-native/docs/webview)\ [Expo Docs](https://facebook.github.io/react-native/docs/text) A component that allows you to play audio. | Parameter | Description | | --------- | --------------------------------------- | | **URL** | The URL of the audio file to be played. | ![](https://cdn.readme.io/img/book-icon.svg?1613687634098) Updated about a month ago * [Table of Contents](https://docs.draftbit.com/docs/media) * [Image](https://docs.draftbit.com/docs/media#image) * [Configuration](https://docs.draftbit.com/docs/media#configuration) * [Resources](https://docs.draftbit.com/docs/media#resources) * [Image Background](https://docs.draftbit.com/docs/media#image-background) * [Configuration](https://docs.draftbit.com/docs/media#configuration-1) * [Resources](https://docs.draftbit.com/docs/media#resources-1) * [Video](https://docs.draftbit.com/docs/media#video) * [Configuration](https://docs.draftbit.com/docs/media#configuration-2) * [Resources](https://docs.draftbit.com/docs/media#resources-2) * [Web View](https://docs.draftbit.com/docs/media#web-view) * [Configuration](https://docs.draftbit.com/docs/media#configuration-3) * [Resources](https://docs.draftbit.com/docs/media#resources-3) * [Audio Player](https://docs.draftbit.com/docs/media#audio-player) * [Configuration](https://docs.draftbit.com/docs/media#configuration-4)