> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-10684810.mintlify.site/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](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-overview.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=e8ad3d611477c379d6d5400520938ae5" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe>
            <VeltRecorderPlayerExpandedWireframe.Panel />
            <VeltRecorderPlayerExpandedWireframe.Transcription />
        </VeltRecorderPlayerExpandedWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Panel

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=60bacfd94e03eb4bb07dc92f58f0479f" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-panel-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Panel>
            <VeltRecorderPlayerExpandedWireframe.Display />
            <VeltRecorderPlayerExpandedWireframe.CopyLink />
            <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
            <VeltRecorderPlayerExpandedWireframe.Subtitles />
            <VeltRecorderPlayerExpandedWireframe.Controls />
        </VeltRecorderPlayerExpandedWireframe.Panel>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Display

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=e715c1cf4384d41956a07689cdf9ad39" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-panel-display.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Display />
    </VeltWireframe>
    ```
  </Tab>

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

#### Subtitles

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=1505858248a712d4f15dec6bd76e206c" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Subtitles />
    </VeltWireframe>
    ```
  </Tab>

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

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=98825e5fdf3b325043ace93744971116" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-copy-link.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.CopyLink />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### MinimizeButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=8f2bc5dd22b71f9197386ed975a837aa" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-minimize.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Controls

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=bdcdad80487c4c38927d3902a5d03039" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### ProgressBar

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=b819852551d2282a92cebe1cfa480ddb" alt="" width="1280" height="244" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### ToggleButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=145462812e2bbcf146750db5a4dfe59e" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
            <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
        </VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Pause

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Play

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Time

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=29f3ecdca86e4c4bc893c34b1fd55d5b" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-time.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### CurrentTime

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### TotalTime

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### SubtitleButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=952fe2e3db9ac0deef7695a9bff767ea" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
            <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
        </VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### TranscriptionButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=311d3c9e1270bb4e275739012587fa9f" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
            <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
        </VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

##### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### VolumeButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=1dca43f4cb0c19c94ffa040952fe30ea" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-volume.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### SettingsButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=9f6ec8cfb67f0660a832cbc2188aa3df" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-settings.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### DeleteButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=c1f0afbe3c0d35dffe409395f472687a" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-delete.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Transcription

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=e161eaf1e2d0903cedc07c06019b4747" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-transcription.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Transcription />
    </VeltWireframe>
    ```
  </Tab>

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