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