ef-pause

Pause button that automatically hides when playback stops.

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-pause class="absolute top-4 right-4">
    <button class="w-12 h-12 rounded-full bg-black/50 backdrop-blur flex items-center justify-center text-white hover:bg-black/70">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
    </button>
  </ef-pause>
</ef-timegroup>

Auto-Hide Behavior

The pause button automatically sets display: none when playback stops. It becomes visible again when playing.

Custom Slot Content

Slot any content as the pause button:

<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-pause class="absolute bottom-4 right-4">
    <button class="px-6 py-3 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700 shadow-lg">
      ⏸ Pause
    </button>
  </ef-pause>
</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-pause>
    <button class="px-4 py-2 bg-red-600 text-white rounded">Pause</button>
  </ef-pause>
</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-pause target="video-1">
  <button>Pause</button>
</ef-pause>

Separate Play and Pause

Combine ef-play and ef-pause for independent buttons that show based on state:

<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-4 left-4 flex gap-2">
    <ef-play>
      <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        ▶ Play
      </button>
    </ef-play>

    <ef-pause>
      <button class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
        ⏸ Pause
      </button>
    </ef-pause>
  </div>
</ef-timegroup>

Floating Pause Button

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

  <ef-pause class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
    <button class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-xl hover:scale-110 transition">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
    </button>
  </ef-pause>
</ef-timegroup>

Corner Pause Control

<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-pause class="absolute top-4 left-4">
    <button class="flex items-center gap-2 px-4 py-2 bg-black/60 backdrop-blur text-white rounded-full hover:bg-black/80 transition">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>
      </svg>
      <span class="text-sm font-medium">Pause</span>
    </button>
  </ef-pause>
</ef-timegroup>

Toggle vs Separate Buttons

• Use ef-toggle-play for a single button that switches icons

• Use separate ef-play and ef-pause for independent buttons that show/hide based on state

• Choose based on your UI design - both approaches work equally well