This tutorial guides you through using controls with video elements. Each step builds on the previous one, teaching you how to create flexible control layouts.

Step 1: Basic Controls Within a Timegroup

Let's start with controls placed directly inside a timegroup element.

What you'll learn: How to place control elements within a timegroup for direct, self-contained control.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black relative" id="tutorial-preview-1">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourceout="2s" class="size-full object-contain"></ef-video>
</ef-timegroup>
<div class="flex items-center gap-4 p-4 bg-gray-900">
  <ef-controls target="tutorial-preview-1" class="contents">
    <ef-toggle-play>
      <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded">▶ Play</button>
      <button slot="pause" class="px-4 py-2 bg-orange-600 text-white rounded">⏸ Pause</button>
    </ef-toggle-play>
    <ef-scrubber class="flex-1"></ef-scrubber>
    <ef-time-display class="text-white"></ef-time-display>
  </ef-controls>
</div>

Try it yourself: Add an <ef-toggle-loop> control to the control bar.

Step 2: Using ef-controls for Remote Control

Now let's place controls outside the timegroup element using ef-controls.

What you'll learn: How to use context bridging to control a timegroup from anywhere in the page.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-preview-2">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourceout="2s" class="size-full object-contain"></ef-video>
</ef-timegroup>

<ef-controls target="tutorial-preview-2" class="mt-4 flex items-center gap-4 p-4 bg-gray-900">
  <ef-toggle-play>
    <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded">▶ Play</button>
    <button slot="pause" class="px-4 py-2 bg-orange-600 text-white rounded">⏸ Pause</button>
  </ef-toggle-play>
  <ef-scrubber class="flex-1"></ef-scrubber>
  <ef-time-display class="text-white"></ef-time-display>
</ef-controls>

The target attribute references the timegroup's id. Controls inside ef-controls work as if they were nested directly inside the timegroup.

Try it yourself: Move the ef-controls element to a different part of your layout and verify that it still controls the same video.

Step 3: Building a Complete Control Bar

Let's combine all four control elements into a complete control bar.

What you'll learn: How to lay out ef-toggle-play, ef-time-display, ef-scrubber, and ef-toggle-loop together for a full-featured interface.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-preview-3">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourceout="2s" class="size-full object-contain"></ef-video>
</ef-timegroup>

<ef-controls target="tutorial-preview-3" class="mt-4 flex items-center gap-4 p-4 bg-gray-900 rounded">
  <ef-toggle-play>
    <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded">▶</button>
    <button slot="pause" class="px-4 py-2 bg-orange-600 text-white rounded">⏸</button>
  </ef-toggle-play>
  <ef-time-display class="text-white"></ef-time-display>
  <ef-scrubber class="flex-1"></ef-scrubber>
  <ef-toggle-loop>
    <button slot="off" class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600">🔁 Loop</button>
    <button slot="on" class="px-4 py-2 bg-green-700 text-white rounded hover:bg-green-600">🔁 Loop</button>
  </ef-toggle-loop>
</ef-controls>

Layout tips:

• Put ef-time-display before the scrubber to keep it at a fixed width on the left.
• Set flex-1 on ef-scrubber so it fills the remaining horizontal space.
• ef-toggle-loop goes last, anchored to the right edge.

Try it yourself: Customize the button styling and reorder the controls.

Step 4: Multiple Control Sets for the Same Video

Multiple ef-controls instances can target the same video simultaneously. Each set stays in sync.

What you'll learn: How to create multiple independent control interfaces for the same underlying playback state.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-preview-4">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourceout="2s" class="size-full object-contain"></ef-video>
</ef-timegroup>

<ef-controls target="tutorial-preview-4" class="mt-4 flex items-center gap-4 p-4 bg-gray-900 rounded">
  <ef-scrubber class="flex-1"></ef-scrubber>
  <ef-toggle-play>
    <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded">▶</button>
    <button slot="pause" class="px-4 py-2 bg-orange-600 text-white rounded">⏸</button>
  </ef-toggle-play>
</ef-controls>

<ef-controls target="tutorial-preview-4" class="mt-2 flex items-center gap-4 p-4 bg-gray-800 rounded">
  <ef-time-display class="text-white"></ef-time-display>
  <ef-toggle-loop>
    <button slot="off" class="px-4 py-2 bg-gray-700 text-white rounded">🔁</button>
    <button slot="on" class="px-4 py-2 bg-green-700 text-white rounded">🔁</button>
  </ef-toggle-loop>
</ef-controls>

Both ef-controls elements read from and write to the same playback state. Clicking play in the first bar will cause the time display in the second bar to update, and vice versa.

Try it yourself: Create a modal dialog with its own controls that target the same video.

---

Next steps: See Context Bridging to understand how ef-controls wires together with the preview, or browse the individual element references for styling details.