> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-overview.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f8336cb993cf4527fdf444e65d81218d" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f0ec3ca97037d5f9dc555df3e0e80d68" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=5856647d8dd490e5d3d69221c2c59414" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=6e86b2337e7893edeeeb0bfdba2ef093" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=26d6aecf6a9ee8dcb48f3ffe90bdfacb" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f87b2db2bdda4d71f3a6d8e0f2e85cd3" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=55f46510257e4a6e11c7de6cc1e50efb" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=168cedb510d6c4fc9dd406b97b7f23c0" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=d87f71035ec8f8e036eb101ebfe87fa8" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=b6f5d24269c8f8480fa6227b6251f2aa" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=81a51947f8891ac32b67a1579c824476" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=0df7528f717e1ded43dbeb2db906eddc" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=767f27dfe23b130ce64701a70fb4417a" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=99dcfc1a6b1320c474dae77571d08e5f" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f3ffcf232655b9aa00d8314d01e45f07" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=d2285e6641590a909b42cd1f24fd93c9" 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>
