ef-toggle-loop

Attributes

target

string

ID of the element to control (optional if nested in composition)

Button to toggle loop playback. Shows different content based on loop state.

Basic Usage

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

  <div class="absolute bottom-4 left-4 flex gap-2">
    <ef-toggle-play>
      <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        ▶
      </button>
      <button slot="pause" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
        ⏸
      </button>
    </ef-toggle-play>

    <ef-toggle-loop>
      <button slot="on" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
        🔁 Loop On
      </button>
      <button slot="off" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
        🔁 Loop Off
      </button>
    </ef-toggle-loop>
  </div>
</ef-timegroup>

Slots

on

Content shown when loop is enabled. Clicking disables loop.

off

Content shown when loop is disabled. Clicking enables loop.

Icon-Only Toggle

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

  <div class="absolute top-4 right-4 flex gap-2">
    <ef-toggle-loop>
      <button
        slot="on"
        class="w-10 h-10 rounded-full bg-green-600/80 backdrop-blur flex items-center justify-center text-white hover:bg-green-600"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M17 1l4 4-4 4" />
          <path d="M3 11V9a4 4 0 0 1 4-4h14" />
          <path d="M7 23l-4-4 4-4" />
          <path d="M21 13v2a4 4 0 0 1-4 4H3" />
        </svg>
      </button>
      <button
        slot="off"
        class="w-10 h-10 rounded-full bg-black/60 backdrop-blur flex items-center justify-center text-white/60 hover:bg-black/80"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M17 1l4 4-4 4" />
          <path d="M3 11V9a4 4 0 0 1 4-4h14" />
          <path d="M7 23l-4-4 4-4" />
          <path d="M21 13v2a4 4 0 0 1-4 4H3" />
        </svg>
      </button>
    </ef-toggle-loop>
  </div>
</ef-timegroup>

Compact Toggle

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

  <ef-toggle-loop class="absolute top-4 left-4">
    <button
      slot="on"
      class="px-3 py-1 text-xs bg-green-600 text-white rounded-full font-semibold hover:bg-green-700"
    >
      Loop: ON
    </button>
    <button
      slot="off"
      class="px-3 py-1 text-xs bg-gray-600 text-white rounded-full font-semibold hover:bg-gray-700"
    >
      Loop: OFF
    </button>
  </ef-toggle-loop>
</ef-timegroup>

With ef-controls

Use with ef-controls to control a non-ancestor element:

<ef-timegroup id="my-video" mode="contain" class="w-full h-96">
  <ef-video src="video.mp4" sourceout="3s" class="size-full"></ef-video>
</ef-timegroup>

<ef-controls target="my-video" class="flex gap-2">
  <ef-toggle-play>
    <button slot="play">Play</button>
    <button slot="pause">Pause</button>
  </ef-toggle-play>

  <ef-toggle-loop>
    <button slot="on">Loop: ON</button>
    <button slot="off">Loop: OFF</button>
  </ef-toggle-loop>
</ef-controls>

Target Attribute

Directly target an element by ID without ef-controls:

<ef-timegroup id="video-1" mode="contain">
  <ef-video src="video.mp4"></ef-video>
</ef-timegroup>

<ef-toggle-loop target="video-1">
  <button slot="on">Loop ON</button>
  <button slot="off">Loop OFF</button>
</ef-toggle-loop>

Full Player Controls

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

  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 p-4">
    <ef-scrubber class="h-1 bg-white/20 rounded-full mb-3"></ef-scrubber>

    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <ef-toggle-play>
          <button
            slot="play"
            class="w-9 h-9 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-white hover:bg-white/30"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5v14l11-7z" />
            </svg>
          </button>
          <button
            slot="pause"
            class="w-9 h-9 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-white hover:bg-white/30"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path d="M6 4h4v16H6zM14 4h4v16h-4z" />
            </svg>
          </button>
        </ef-toggle-play>

        <ef-time-display class="text-white text-xs font-mono"></ef-time-display>
      </div>

      <ef-toggle-loop>
        <button
          slot="on"
          class="w-9 h-9 rounded-full bg-green-600/80 flex items-center justify-center text-white hover:bg-green-600"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3" />
          </svg>
        </button>
        <button
          slot="off"
          class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center text-white/50 hover:bg-white/20"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3" />
          </svg>
        </button>
      </ef-toggle-loop>
    </div>
  </div>
</ef-timegroup>

State Indicator Badge

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

  <ef-toggle-loop class="absolute bottom-4 right-4">
    <button
      slot="on"
      class="flex items-center gap-2 px-4 py-2 bg-green-600/90 backdrop-blur text-white rounded-full hover:bg-green-600 transition"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <path d="M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3" />
      </svg>
      <span class="text-sm font-semibold">Looping</span>
    </button>
    <button
      slot="off"
      class="flex items-center gap-2 px-4 py-2 bg-black/60 backdrop-blur text-white/70 rounded-full hover:bg-black/80 transition"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <path d="M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3" />
      </svg>
      <span class="text-sm font-semibold">Loop Off</span>
    </button>
  </ef-toggle-loop>
</ef-timegroup>

Minimal Text Toggle

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

  <ef-toggle-loop class="absolute top-4 right-4">
    <button
      slot="on"
      class="px-3 py-1.5 bg-green-600 text-white rounded text-xs font-bold hover:bg-green-700"
    >
      ✓ LOOP
    </button>
    <button
      slot="off"
      class="px-3 py-1.5 bg-gray-700 text-gray-400 rounded text-xs font-bold hover:bg-gray-600"
    >
      LOOP
    </button>
  </ef-toggle-loop>
</ef-timegroup>

Use Cases

Short videos - Loop a short clip continuously
Product demos - Let users watch the demo repeatedly
Animated backgrounds - Seamlessly loop background videos
GIF replacements - Loop video content like animated GIFs