Editframe
Start
Skills/Editor Toolkit/Toggle Play Element

ef-toggle-play

Attributes

target
string

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

Combined play/pause button that toggles playback and switches content based on 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" class="size-full object-contain"></ef-video>


  <ef-toggle-play class="absolute bottom-4 left-4">
    <button slot="play" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700">
      ▶ Play
    </button>
    <button slot="pause" class="px-6 py-3 bg-gray-600 text-white rounded-lg font-bold hover:bg-gray-700">
      ⏸ Pause
    </button>
  </ef-toggle-play>
</ef-timegroup>

Slots

play

Content shown when paused. Clicking starts playback.

pause

Content shown when playing. Clicking pauses playback.

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" class="size-full object-contain"></ef-video>


  <ef-toggle-play class="absolute inset-0 flex items-center justify-center">
    <button slot="play" class="w-20 h-20 rounded-full bg-white/90 flex items-center justify-center shadow-lg hover:scale-110 transition">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
    <button slot="pause" class="w-20 h-20 rounded-full bg-white/90 flex items-center justify-center shadow-lg hover:scale-110 transition">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
    </button>
  </ef-toggle-play>
</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" class="size-full object-contain"></ef-video>


  <ef-toggle-play class="absolute bottom-4 left-4">
    <button slot="play" class="w-10 h-10 rounded-full bg-black/60 backdrop-blur flex items-center justify-center text-white hover:bg-black/80">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
    <button slot="pause" class="w-10 h-10 rounded-full bg-black/60 backdrop-blur flex items-center justify-center text-white hover:bg-black/80">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
    </button>
  </ef-toggle-play>
</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" class="size-full"></ef-video>
</ef-timegroup>


<ef-controls target="my-video">
  <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-gray-600 text-white rounded">Pause</button>
  </ef-toggle-play>
</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-play target="video-1">
  <button slot="play">Play</button>
  <button slot="pause">Pause</button>
</ef-toggle-play>

Full Control Bar

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


  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 p-4">
    <div class="flex items-center gap-3">
      <ef-toggle-play>
        <button slot="play" class="w-10 h-10 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-white hover:bg-white/30">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button slot="pause" class="w-10 h-10 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-white hover:bg-white/30">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
          </svg>
        </button>
      </ef-toggle-play>


      <ef-scrubber class="flex-1 h-1 bg-white/20 rounded-full"></ef-scrubber>


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

Styled Single Button

Use the same button element for both slots if you want a single button with changing icons:

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


  <ef-toggle-play class="absolute bottom-4 right-4">
    <button slot="play" class="px-5 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-bold shadow-lg hover:scale-105 transition">
      Play Video ▶
    </button>
    <button slot="pause" class="px-5 py-3 bg-gradient-to-r from-gray-500 to-gray-700 text-white rounded-full font-bold shadow-lg hover:scale-105 transition">
      Pause ⏸
    </button>
  </ef-toggle-play>
</ef-timegroup>

Mobile-Friendly Controls

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


  <ef-toggle-play class="absolute inset-0 flex items-center justify-center">
    <button slot="play" class="flex flex-col items-center gap-2 text-white">
      <div class="w-24 h-24 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
      <span class="text-sm font-semibold">Tap to play</span>
    </button>
    <button slot="pause" class="w-24 h-24 rounded-full bg-white/20 backdrop-blur flex items-center justify-center text-white">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
    </button>
  </ef-toggle-play>
</ef-timegroup>

When to Use

  • Use ef-toggle-play when you want a single button that changes appearance
  • Use separate ef-play and ef-pause when you want independent buttons that auto-hide
  • Both approaches provide the same functionality - choose based on your UI design