On this page

Video

    ---
    import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
    import { Video } from "@/components/starwind/video";
    ---

    <Video src={navVideo} controls muted class="rounded-lg" />

import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
    import { Video } from "@/components/starwind/video";

export function Example() {
  return (
    <>
      <Video src={navVideo} controls muted className="rounded-lg" />
    </>
  );
}

Installation

pnpx starwind@latest add video

npx starwind@latest add video

yarn dlx starwind@latest add video

Framework Availability

Astro Available React Available

Video is available for Astro and React.

Usage

General Notes

The Video component automatically detects the video type from the source URL and renders either a native HTML5 <video> element or a YouTube <iframe> embed. It supports:

Native videos: Local files, imported assets, or direct video URLs
YouTube videos: Standard YouTube URLs, short URLs, and embed URLs
YouTube Shorts: Automatically detected and rendered with appropriate settings

YouTube Video

Pass a YouTube URL directly to the src prop. The component handles URL parsing and creates a privacy-enhanced embed using youtube-nocookie.com.

---
import { Video } from "@/components/starwind/video";
---

<Video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="YouTube video"
  class="rounded-lg"
/>

YouTube Shorts

YouTube Shorts are automatically detected and rendered appropriately. Use custom aspect ratio classes to display them correctly.

---
import { Video } from "@/components/starwind/video";
---

<Video
  src="https://www.youtube.com/shorts/WVfUcdYugio"
  title="YouTube Shorts"
  class="aspect-square max-w-xs rounded-lg"
/>

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Video

Inherits iframe attributes.

Inherits video attributes.

Contains the following additional props:

Prop Type Default

autoplay boolean false

Description: Starts media playback automatically when supported by the browser.
Classification: Wrapper prop

controls boolean true

Description: Shows the browser's native media controls.
Classification: Wrapper prop

loop boolean false

Description: Restarts media playback after it reaches the end.
Classification: Wrapper prop

muted boolean false

Description: Starts or renders media with audio muted.
Classification: Wrapper prop

poster string —

Description: Provides the image displayed before video playback starts.
Classification: Wrapper prop

src Required string —

Description: Provides the media source URL.
Classification: Wrapper prop

title string "Video"

Description: Provides an accessible title for embedded media.
Classification: Wrapper prop

Changelog

v1.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.13.0