Player Components¶

Required Configuration

To use player components in your markdown files, you must include the following YAML front matter at the top of your document:

---
extra_javascript:
  - assets/javascripts/asciinema-player.js
  - assets/javascripts/youtube-player.js
---

Without this configuration, players will not render properly.

Asciinema Player¶

Simple Embed¶

Note: The player will load the terminal recording when the cast file is available.

Full Container with Header¶

Phantom Setup Process

Installation Demo

Available Options¶

Option	Description	Values
`data-cols`	Terminal columns	Default: 100
`data-rows`	Terminal rows	Default: 30
`data-autoplay`	Auto-play on load	`true` / `false`
`data-loop`	Loop playback	`true` / `false`
`data-speed`	Playback speed	`0.5` - `3.0`
`data-theme`	Color theme	`solarized-dark`, `solarized-light`, `monokai`, etc.
`data-font-size`	Font size	`small`, `medium`, `large`

YouTube Player¶

Simple Embed¶

Note: Replace VIDEO_ID_HERE with your actual YouTube video ID.

Full Container with Header¶

Phantom E2E Tutorial

Getting Started Guide

Available Options¶

Option	Description	Values
`data-video-id`	YouTube video ID	Required
`data-autoplay`	Auto-play video	`true` / `false`
`data-controls`	Show player controls	`true` / `false`
`data-loop`	Loop video	`true` / `false`
`data-mute`	Mute by default	`true` / `false`
`data-rel`	Show related videos	`true` / `false`
`data-modestbranding`	Minimal YouTube branding	`true` / `false`

Loading States for Players¶

While players are loading, a spinner is displayed:

CSS Animation: The spinner automatically rotates using CSS animations. You can customize the size and color through CSS variables.

Best Practices¶

File Size: Keep Asciinema recordings under 1MB for fast loading
Idle Time: Use data-speed to skip long pauses in recordings
Themes: Choose themes that match your documentation style
Fallbacks: Provide text alternatives for accessibility
Hosting: Host .cast files locally for better performance

Recording Terminal Sessions¶

To create your own Asciinema recordings:

# Install asciinema
pip install asciinema

# Start recording
asciinema rec demo.cast

# Record with specific settings
asciinema rec -i 2 -t "Demo Title" demo.cast

# Play back locally
asciinema play demo.cast

YouTube Integration Tips¶

Privacy: Use data-rel="false" to prevent showing unrelated videos
Branding: Use data-modestbranding="true" for cleaner appearance
Autoplay: Avoid autoplay for better user experience
Muting: Consider muting if autoplay is necessary
Responsive: Players automatically scale to container width