We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
Overview

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe>
        <VeltVideoEditorPlayerWireframe.Title />
        <VeltVideoEditorPlayerWireframe.ApplyButton />
        <VeltVideoEditorPlayerWireframe.RetakeButton />
        <VeltVideoEditorPlayerWireframe.DownloadButton />
        <VeltVideoEditorPlayerWireframe.CloseButton />
        <VeltVideoEditorPlayerWireframe.Preview />
        <VeltVideoEditorPlayerWireframe.ToggleButton />
        <VeltVideoEditorPlayerWireframe.Time />
        <VeltVideoEditorPlayerWireframe.SplitButton />
        <VeltVideoEditorPlayerWireframe.DeleteButton />
        <VeltVideoEditorPlayerWireframe.AddZoomButton />
        <VeltVideoEditorPlayerWireframe.Timeline />
    </VeltVideoEditorPlayerWireframe>
</VeltWireframe>

​
Title

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe>

​
ApplyButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton>
        <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
    </VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe>

​
Loading

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe>

​
RetakeButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.RetakeButton />
</VeltWireframe>

​
DownloadButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe>

​
CloseButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe>

​
Preview

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview>
        <VeltVideoEditorPlayerWireframe.Preview.Loading />
        <VeltVideoEditorPlayerWireframe.Preview.Video />
    </VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe>

​
Loading

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe>

​
Video

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe>

​
ToggleButton

Template Variables:
VariableDescription
isPlayingTrimPreviewThis is true when the video is playing in the preview else it is false
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe>

​
Time

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Time>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
        <VeltVideoEditorPlayerWireframe.TotalTime />
    </VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe>

​
CurrentTime

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

​
TotalTime

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe>

​
SplitButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.SplitButton>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
    </VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe>

​
CurrentTime

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

​
DeleteButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe>

​
AddZoomButton

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.AddZoomButton />
</VeltWireframe>

​
Timeline

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline>
        <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding />
        <VeltVideoEditorPlayerWireframe.Timeline.Container />
        <VeltVideoEditorPlayerWireframe.Timeline.Marker />
    </VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe>

​
BackspaceHint

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
</VeltWireframe>

​
Onboarding

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
</VeltWireframe>
Content
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
</VeltWireframe>
Text
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
</VeltWireframe>
Title
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
</VeltWireframe>
Description
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
</VeltWireframe>
Arrow
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
</VeltWireframe>

​
Container

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Container>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead />
        <VeltVideoEditorPlayerWireframe.Timeline.Trim />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale />
    </VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe>
Playhead
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
    </VeltVideoEditorPlayerWireframe.Timeline.Playhead>
</VeltWireframe>
Line
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
</VeltWireframe>
Actions
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
</VeltWireframe>
Trim
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe>
Scale
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe>
ZoomButton
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
</VeltWireframe>
Trigger
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe>
Options
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
</VeltWireframe>
List
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
</VeltWireframe>
Item
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe>
Input
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe>

​
Marker

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe>