Basic Usage
Learn how to implement the Video component with common patterns and use cases
Learn how to implement the Video component with common patterns and use cases
import {Video} from "@rixl/media-react";Every Video component needs at minimum:
<Video
id="your-video-id" // Required: Your video ID from dash.rixl.com/videos
/>The id prop is mapped to videoId on the underlying <rixl-video> web component.
import {Video} from "@rixl/media-react";
function BasicVideo() {
return (
<div className="max-w-4xl mx-auto">
<Video id="your-video-id" className="w-full h-auto rounded-lg" analyticsPage="standalone" />
</div>
);
}import {Video} from "@rixl/media-react";
function AnalyticsVideo() {
return (
<Video
id="your-video-id"
analyticsPage="standalone"
onRixlAnalytics={(e) => {
console.log("Analytics event:", e.detail.event);
}}
/>
);
}<script type="module">
import "@rixl/media-lit/video";
const video = document.querySelector("rixl-video");
video.addEventListener("rixl-analytics", (e) => {
console.log(e.detail.event);
});
</script>
<rixl-video video-id="your-video-id" analytics-page="standalone"></rixl-video>function HeroVideo() {
return (
<section className="relative h-screen overflow-hidden">
<Video
id="hero-video-id"
autoPlay
muted
className="absolute inset-0 w-full h-full object-cover"
/>
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-4xl font-bold text-white">Welcome</h1>
</div>
</section>
);
}function HoverPreview() {
return (
<div className="w-64 aspect-video">
<Video id="preview-video-id" autoPlay muted className="w-full h-full object-cover" />
</div>
);
}import {Feed} from "@rixl/media-react";
function FeedPage() {
return <Feed feedId="my-feed" analyticsPage="feed" onRixlAnalytics={(e) => console.log(e.detail.event)} />;
}The built-in RIXL player provides a default control bar, but you can also build your own controls with theme="hideUI" and drive the player from onRixlAnalytics or your own state.
function CustomControlsVideo() {
return (
<div className="relative w-full aspect-video">
<Video id="video-id" theme="hideUI" className="w-full h-full" />
{/* Render your own controls here as siblings */}
</div>
);
}See the Player Controls guide for all available UI props.
Autoplay: The SDK mutes autoplay by default to satisfy browser policies. For background videos, keep muted={true}.
Custom themes: Use theme, controls, progressBar, allowFullscreen, heatmap, chapters, and other UI props to configure the built-in player. All of these are forwarded to the Lit element.