ef-play

Play button that automatically hides when playback starts.

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-play class="absolute inset-0 flex items-center justify-center">
    <button class="w-20 h-20 rounded-full bg-white/90 flex items-center justify-center shadow-lg">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </ef-play>
</ef-timegroup>

Auto-Hide Behavior

The play button automatically sets display: none when playback starts. It becomes visible again when paused.

Custom Slot Content

Slot any content as the play 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-play class="absolute bottom-4 left-4">
    <button class="px-6 py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700">
      ▶ Start Video
    </button>
  </ef-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-play>
    <button class="px-4 py-2 bg-green-600 text-white rounded">Play</button>
  </ef-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-play target="video-1">
  <button>Play</button>
</ef-play>

Styled Play Overlay

Center a large play button over video:

<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-play class="absolute inset-0 flex items-center justify-center bg-black/30">
    <button class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-2xl hover:scale-110 transition">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="white">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </ef-play>
</ef-timegroup>

With Text Label

<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-play class="absolute inset-0 flex items-center justify-center">
    <button class="flex flex-col items-center gap-3 text-white hover:scale-105 transition">
      <div class="w-20 h-20 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
      <span class="text-sm font-semibold">Click to play</span>
    </button>
  </ef-play>
</ef-timegroup>

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>

Combining Play and Pause

Use ef-toggle-play if you want a single button that switches between play and pause. Use separate ef-play and ef-pause buttons if you want independent buttons that auto-hide based on state.