Skip to main content

Audio, Video, and Tabbed Content

Three built-in components that extend what your posts can do: AudioPlayer, VideoEmbed, and Tabs. No CDN flags needed — import them directly in any MDX file.

AudioPlayer

An accessible HTML5 audio player with title, caption, and auto-detected MIME type. The audio below is a public domain piano recording from Wikimedia Commons:

Frédéric Chopin — Nocturne Op. 9, No. 2

Public domain recording. Pianist: Mathieu Laplante.

A second example using an MP3 file — the player auto-detects the type from the extension:

J.S. Bach — Fugue in A minor, BWV 543

Public domain organ recording from Wikimedia Commons.

Props:

PropTypeDescription
srcstringAudio file URL or path
titlestringDisplay title (optional)
captionstringCaption below the player (optional)
typestringMIME type override (e.g. "audio/ogg"); auto-detected from extension by default

VideoEmbed

A responsive wrapper for YouTube, Vimeo, or direct video files. The aspect ratio is maintained at any container width.

YouTube

Richard Feynman’s famous lecture on the pleasure of finding things out:

A 47-minute interview that shaped how many scientists think about curiosity.

Direct Video File

You can also embed a self-hosted .mp4 or .webm:

CC-BY Blender Foundation. Swap the src for your own hosted video.

Props:

PropTypeDefaultDescription
srcstringYouTube URL, Vimeo URL, or direct .mp4/.webm URL
titlestringCaption / accessible label
captionstringOptional text below the embed
aspectnumber16/9Aspect ratio (16/9, 4/3, 1/1, 9/16)

Tabs

A lightweight tabbed interface — no JavaScript framework, no CSS framework dependency.

Euler’s method in Python:

def euler(f, y0, t_span, dt):
    """Solve dy/dt = f(t, y) with initial value y0."""
    t_start, t_end = t_span
    t, y = t_start, y0
    result = [(t, y)]
    while t < t_end:
        y = y + dt * f(t, y)
        t = t + dt
        result.append((t, y))
    return result

# Example: dy/dt = -y, y(0) = 1 → exact: y = e^{-t}
solution = euler(lambda t, y: -y, 1.0, (0, 5), dt=0.01)

Props:

PropTypeDescription
tabsstring[]Tab labels — defines the number of tabs
idstringOptional unique ID prefix (needed when multiple Tabs appear on one page)

Use named slots tab-0, tab-1, tab-2, … for each tab’s content. Content can be any Markdown, MDX, or raw HTML.