Video | Bearnie

<Video
  src="https://www.youtube.com/watch?v=YE7VzlLtp-4"
  title="Big Buck Bunny"
/>

Installation

npx bearnie add video

Usage

import { Video } from "@/components/bearnie/video"

<Video src="https://www.youtube.com/watch?v=..." title="Product demo" />

A plain YouTube iframe loads roughly a megabyte of player JavaScript before anyone presses play. Video renders just a thumbnail and a play button instead; the iframe (via the cookie-free youtube-nocookie.com domain) is created only on click and starts playing immediately. Accepts YouTube watch/share/shorts/embed URLs, bare YouTube video ids, and Vimeo URLs.

Examples

Vimeo

YouTube thumbnails are resolved automatically. Vimeo has no public thumbnail URL scheme, so pass your own poster (without one, the facade is a plain surface with a play button).

<Video
  src="https://vimeo.com/1084537"
  title="Big Buck Bunny on Vimeo"
  poster="/thumbnails/big-buck-bunny.jpg"
/>

Custom aspect ratio

The default is aspect-video (16:9); override it with a class.

<Video
  src="YE7VzlLtp-4"
  title="Big Buck Bunny, square crop"
  class="aspect-square max-w-sm"
/>

Props

Prop	Type	Default	Description
src	string	required	YouTube/Vimeo URL or bare YouTube video id
title	string	required	Accessible name; also the iframe title
poster	string	YouTube thumbnail	Thumbnail image shown before load
class	string	-	Additional CSS classes