This tutorial guides you through the essential concepts of working with captions elements. Each step builds on the previous one, teaching the fundamental skills needed for caption composition.

Step 1: Display Basic Segment Captions

Start with the simplest captions display — showing complete caption segments as they play.

What you'll learn: How to display caption segments using the <ef-captions-segment> child element.

Modify the segment text in the script element to see how captions update automatically.

Step 2: Add Word-by-Word Highlighting

Display individual words as they're spoken, creating a more dynamic caption experience.

What you'll learn: How to use <ef-captions-active-word> to highlight words individually.

Change the class on <ef-captions-active-word> to experiment with different styling.

Step 3: Create Context Display

Show the current word with surrounding context, creating a more complete reading experience.

What you'll learn: How to combine <ef-captions-before-active-word>, <ef-captions-active-word>, and <ef-captions-after-active-word> to show context.

Adjust the text colors and sizes of each child element to create your own visual hierarchy.

Step 4: Style with CSS Variables

Use the --ef-word-seed CSS variable to create varied, non-repetitive animations for each word.

What you'll learn: How to use CSS variables to create unique styling for each word.

Experiment with different CSS properties using var(--ef-word-seed) to create your own animation variations.

Step 5: Connect to Video or Audio

Synchronize captions with a video or audio element for real-world use.

What you'll learn: How to use the target attribute to synchronize captions with media playback.

When target is set to the video's id, captions load transcription data automatically and stay in sync with playback. Add <ef-captions-active-word> to see word-by-word highlighting synchronized with the video.

Next Steps

• How-To Guides — Specific techniques: loading captions data, connecting to media, animating words, karaoke-style captions
• Concepts — How captions data is structured, temporal synchronization, CSS animation variables
• Reference — Complete attribute and CSS variable documentation (captions.md)