> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder Player Expanded

> Recorder player expanded component. This is the expanded player that appears when user wants to view the recording in full screen.

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## Overview

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-overview.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=bcb0732b92e0282c07fb53b601878045)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe>
>         <VeltRecorderPlayerExpandedWireframe.Panel />
>         <VeltRecorderPlayerExpandedWireframe.Transcription />
>     </VeltRecorderPlayerExpandedWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-wireframe>
>         <velt-recorder-player-expanded-panel-wireframe></velt-recorder-player-expanded-panel-wireframe>
>         <velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
>     </velt-recorder-player-expanded-wireframe>
> </velt-wireframe>
> ```

## Panel

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=76c7e018bc00629555b9679b38f1e26f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Panel>
>         <VeltRecorderPlayerExpandedWireframe.Display />
>         <VeltRecorderPlayerExpandedWireframe.CopyLink />
>         <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
>         <VeltRecorderPlayerExpandedWireframe.Subtitles />
>         <VeltRecorderPlayerExpandedWireframe.Controls />
>     </VeltRecorderPlayerExpandedWireframe.Panel>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-panel-wireframe>
>         <velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
>         <velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
>         <velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
>         <velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
>         <velt-recorder-player-expanded-controls-wireframe></velt-recorder-player-expanded-controls-wireframe>
>     </velt-recorder-player-expanded-panel-wireframe>
> </velt-wireframe>
> ```

#### Display

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=1ff3c53c20a2cb062a12022b42d32a9a)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Display />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
> </velt-wireframe>
> ```

#### Subtitles

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=7be6f3ea99b57e6df65c3c50af0f1023)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Subtitles />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
> </velt-wireframe>
> ```

#### CopyLink

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=9e60e3cae499901b0f9abdfec41ec2f3)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.CopyLink />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
> </velt-wireframe>
> ```

#### MinimizeButton

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=e33e01f6b1c5141b7a05fdb337cc0f5d)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
> </velt-wireframe>
> ```

#### Controls

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=c28871df5f8fe28c684d0b69fdd99045)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls>
>         <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
>         <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton />
>         <VeltRecorderPlayerExpandedWireframe.Controls.Time />
>         <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton />
>         <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton />
>         <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
>         <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
>         <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
>     </VeltRecorderPlayerExpandedWireframe.Controls>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-wireframe>
>         <velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
>         <velt-recorder-player-expanded-controls-toggle-button-wireframe></velt-recorder-player-expanded-controls-toggle-button-wireframe>
>         <velt-recorder-player-expanded-controls-time-wireframe></velt-recorder-player-expanded-controls-time-wireframe>
>         <velt-recorder-player-expanded-controls-subtitle-button-wireframe></velt-recorder-player-expanded-controls-subtitle-button-wireframe>
>         <velt-recorder-player-expanded-controls-transcription-button-wireframe></velt-recorder-player-expanded-controls-transcription-button-wireframe>
>         <velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
>         <velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
>         <velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
>     </velt-recorder-player-expanded-controls-wireframe>
> </velt-wireframe>
> ```

#### ProgressBar

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=ced503d923675061ad18fdef71020ff4)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
> </velt-wireframe>
> ```

#### ToggleButton

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=4855d8e604a38c77f5aa1ce7bd187a28)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
>         <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
>         <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
>     </VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-toggle-button-wireframe>
>         <velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
>         <velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
>     </velt-recorder-player-expanded-controls-toggle-button-wireframe>
> </velt-wireframe>
> ```

##### Pause

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
> </velt-wireframe>
> ```

##### Play

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
> </velt-wireframe>
> ```

#### Time

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=7ff6994de1ce6fb35c166284d6d0378b)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.Time>
>         <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
> 				<!-- Add custom divider by adding any tag like <p> / <p> -->
>         <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
>     </VeltRecorderPlayerExpandedWireframe.Controls.Time>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-time-wireframe>
>         <velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
>         <velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
>     </velt-recorder-player-expanded-controls-time-wireframe>
> </velt-wireframe>
> ```

##### CurrentTime

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
> </velt-wireframe>
> ```

##### TotalTime

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
> </velt-wireframe>
> ```

#### SubtitleButton

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=60c6f2eff41a7dbd62a8f03b006a8ac8)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
>         <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
>         <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
>     </VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-subtitle-button-wireframe>
>         <velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
>         <velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
>     </velt-recorder-player-expanded-controls-subtitle-button-wireframe>
> </velt-wireframe>
> ```

##### Icon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
> </velt-wireframe>
> ```

##### Tooltip

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
> </velt-wireframe>
> ```

#### TranscriptionButton

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=76e0143a7dee8c7f173f5cde0468ca85)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
>         <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
>         <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
>     </VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-transcription-button-wireframe>
>         <velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
>         <velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
>     </velt-recorder-player-expanded-controls-transcription-button-wireframe>
> </velt-wireframe>
> ```

##### Icon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
> </velt-wireframe>
> ```

##### Tooltip

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
> </velt-wireframe>
> ```

#### VolumeButton

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=f2798dd9b95de450fa49bc0f7df9c47f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
> </velt-wireframe>
> ```

#### SettingsButton

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=17972ab3f706180f58bf01df34033223)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
> </velt-wireframe>
> ```

#### DeleteButton

![](https://mintcdn.com/velt/ipMOWkdw2JUbdj_X/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max\&auto=format\&n=ipMOWkdw2JUbdj_X\&q=85\&s=8f1d44a9f8ed3a9b1776f0886b197c03)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
> </velt-wireframe>
> ```

## Transcription

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=c0c681a6deb9154f3a00e492259f440a)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderPlayerExpandedWireframe.Transcription />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
> </velt-wireframe>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.