> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-21cab773.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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-overview.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=76fd77a0970206d139f540bb61fc1877" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=b565f87f18ebda34440793073ca013d2" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=5df97c7ec7891d8734ed4d6a224c9740" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=817273f3d51a7fb8ad5a78436086cd05" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=4db2925ad2f09614f35eb06059db5bbd" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=b955fbe709b14ce0a8d69822fe5a5291" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=e7614ba95b702a39daaff5285442c039" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=0b96be672aa9c771a16b0cd9295af0bd" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=b0f7e3e6d3f786abca08215a9e1b0727" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=bc2e9ab77a252d0f5d1781c2cb8be278" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=adf5df764484b9cef03704be44bd2aa9" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=7683bd81711c7faef629bc2c29b6d37c" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=b71619f89150b8169f50a9c6eebc41ac" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=5f44cd2c87d513b13054737d6653507c" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=78b172987923124c2be320a053040cbf" 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-21cab773/mdk1IilAkIpSnoWB/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max&auto=format&n=mdk1IilAkIpSnoWB&q=85&s=b290ab224a185695e5ab6bd2a26c53a6" 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>
