Video

Introduction

The Video component provides a flexible way to embed videos while ensuring accessibility and proper aspect ratio handling. It includes special handling for YouTube videos to prevent keyboard traps and maintain WCAG compliance.

When to use

The Video component is perfect for situations where you need embedded videos:

Product demonstrations
Tutorial videos
Background videos
Video testimonials
Course content
Marketing materials
YouTube embeds

Usage

Learn how to implement the Video component in your project.

Basic

---
import { Video } from 'accessible-astro-components'
---

<Video
  src="https://www.youtube.com/watch?v=j8K-ESJF814"
  title="One year of Starlight: Astro's community-built documentation theme"
  ratio="16:9"
/>

YouTube specific

<Video
  src="https://www.youtube.com/watch?v=tk1RWcasgxs&disablekb=1"
  title="Astro Together keynote in 6 minutes"
  ratio="21:9"
  loading="eager"
/>

Props

Configure the Video component using these available props to customize its behavior and appearance.

Prop	Type	Default	Description
`src`	`string`	-	URL of the video (supports YouTube and direct embed URLs)
`title`	`string`	-	Title for the video (required for accessibility)
`ratio`	`'1:1' \| '4:3' \| '16:9' \| '21:9'`	`'16:9'`	Aspect ratio of the video
`loading`	`'lazy' \| 'eager'`	`'lazy'`	iframe loading strategy
`class`	`string`	`''`	Additional CSS classes to apply

Accessibility

Accessibility isn’t an afterthought - it’s built into the core of this component through semantic HTML elements and proper ARIA attributes. The Video component is built with accessibility in mind:

Required title attribute for screen readers
Prevention of YouTube keyboard traps
Maintained aspect ratios to prevent layout shift
Proper iframe attributes for security
Semantic HTML structure

Styling

Customize the Video component while maintaining its accessibility features.

Custom CSS
Tailwind Classes

/* Option 1: Using :global() in your style block */
<style>
  :global(.video-wrapper) {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  :global(.video-wrapper iframe) {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }
</style>

/* Option 2: Using is:global on the style tag */
<style is:global>
  .video-wrapper {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  .video-wrapper iframe {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }
</style>

<Video
  src="https://youtube.com/..."
  title="Example Video"
  class="rounded-lg overflow-hidden shadow-md"
/>

Interactive examples

See the Video component in action with these practical examples.