ef-video

Renders a video clip with optional source trim.

Renders a video clip. Use sourcein and sourceout to trim the source file.

Attribute	React prop	Type	Default	Description
`src`	same	`string`	—	URL of the source file.
`duration`	same	`CSS time`	—	How long this element is active.
`offset`	same	`CSS time`	`0`	When this element starts within a parent fixed-mode group.
`sourcein`	`sourceIn`	`CSS time`	—	Start time within the source file.
`sourceout`	`sourceOut`	`CSS time`	—	End time within the source file.
`trimstart`	`trimStart`	`CSS time`	—	Trim this much off the start of the source.
`trimend`	`trimEnd`	`CSS time`	—	Trim this much off the end of the source.
`mute`	`muted`	`boolean`	`false`	Mute/unmute the media element

Use CSS object-fit: cover | contain | fill to control how the video fills its box.

<ef-timegroup mode="fixed" duration="8s" class="w-[1920px] h-[1080px]">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    sourcein="2s"
    sourceout="10s"
    class="absolute inset-0 size-full"
    style="object-fit:cover;"
  ></ef-video>
  <ef-text
    duration="3s"
    offset="1s"
    class="absolute bottom-16 left-16 text-white text-5xl font-bold drop-shadow-xl"
  >
    trimmed clip, 2s–10s
  </ef-text>
</ef-timegroup>