Visual effects, animated effects, and trimming are already covered in the Video Element reference under "Video Effects" and "Trimming Video". This file covers guides not present there.

---

Add Fade Transitions

Problem: You need smooth entry and exit fades for a video.

Solution: Use CSS animations with the --ef-duration CSS variable to time fade-out relative to the video's end.

--ef-duration contains the video's duration as a CSS <time> value (e.g., 10s), so the fade-out starts at the right moment without hardcoding the duration.

Variants:

<!-- Fade in only -->
<ef-video src="video.mp4" style="animation: 2s fade-in"></ef-video>

<!-- Fade out only (starts 2s before the end) -->
<ef-video src="video.mp4" style="animation: 2s fade-out calc(var(--ef-duration) - 2s)"></ef-video>

<!-- Fade in and out -->
<ef-video src="video.mp4" style="animation: 2s fade-in, 2s fade-out calc(var(--ef-duration) - 2s)"></ef-video>

---

Optimize Video Playback

Problem: You need to tune buffering for your connection speed, memory constraints, or loading time requirements.

Solution: Configure the buffering attributes to control how much video is preloaded.

<ef-video
  src="video.mp4"
  audio-buffer-duration="10000"
  max-video-buffer-fetches="2"
  enable-video-buffering="true"
></ef-video>

Attribute	Default	Effect
audio-buffer-duration	10000 (ms)	How far ahead to buffer. Increase for smoother playback on slow connections (uses more bandwidth); decrease for lower memory and faster initial load.
max-video-buffer-fetches	2	Parallel fetch count. Higher values buffer faster but may impact other network requests.
enable-video-buffering	true	Disable to turn off ahead-of-time buffering entirely.

The defaults work well for most cases. Tune only when you have a measured reason to.

Common adjustments:

<!-- Slow connection: buffer more -->
<ef-video src="video.mp4" audio-buffer-duration="20000" max-video-buffer-fetches="3"></ef-video>

<!-- Memory-constrained: buffer less -->
<ef-video src="video.mp4" audio-buffer-duration="5000" max-video-buffer-fetches="1"></ef-video>

Production rendering: Use asset-id instead of src for parallel rendering across a worker fleet. Buffering configuration does not apply to asset-id rendering. See Production vs Development Workflows for details.

See JIT Transcoding Architecture for how buffering fits into the overall architecture.