Library · Media & Buttons

Video

Responsive video component with YouTube embed support, privacy enhancements (youtube-nocookie), and configurable aspect ratios.

Figma: Primitives / Video ↗

Live preview — edit theme bottom-right

---
import Video from "../components/primitives/video/Video.astro";
---
<Video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Demo video"
  ratio="16:9"
/>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the video wrapper
`src`	`string`	Yes	URL of the video (YouTube or direct embed)
`title`	`string`	Yes	Accessible title for the video (default: "YouTube video player")
`ratio`	`'1:1' \| '4:3' \| '16:9' \| '21:9'`	—	Aspect ratio of the video (default: "16:9")
`loading`	`'lazy' \| 'eager'`	—	Loading strategy for the iframe (default: "lazy")
`[key: string]`	`string \| number \| boolean \| undefined`	—	HTML attributes to spread on the video wrapper

Example with all props

<Video
  class="project-video"
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Project fly-through"
  ratio="21:9"
  loading="lazy"
/>