Minimal Video Player

A video player with no UI controls, designed for Feed components where you build custom interfaces on top of the video.

Live Example

Basic Implementation

import { Video } from '@rixl/videosdk-react';

<Video
  id="your-video-id"
  theme="minimal"
  muted={true} // Required
/>

Must be muted: No UI controls, no keyboard shortcuts, requires muted={true}. This is a blank canvas for custom implementations.

What's Included

Available:

Video playback
Autoplay support

NOT Available:

No visible controls
No keyboard shortcuts
No audio (must be muted)

Use Cases

Feed Component

Build TikTok/Instagram-style feeds with custom UI:

function FeedVideo({ videoId }) {
  return (
    <div className="relative w-full h-screen">
      <Video
        id={videoId}
        className="w-full h-full object-cover"
        theme="minimal"
        muted={true}
        autoPlay={true}
        loop={true}
      />

      {/* Your custom overlay UI */}
      <div className="absolute bottom-20 left-6 text-white">
        <h3 className="text-xl font-bold">Video Title</h3>
        <p className="text-sm">Creator Name</p>
      </div>
    </div>
  );
}

Video Preview Grid

<div className="grid grid-cols-3 gap-4">
  {videos.map(video => (
    <Video
      key={video.id}
      id={video.id}
      className="w-full aspect-video object-cover rounded-lg"
      theme="minimal"
      muted={true}
      autoPlay={true}
      loop={true}
    />
  ))}
</div>

When to Use

Use Minimal Theme For:

Feed components
Video previews
Background videos
Custom player implementations

Use Standard Theme Instead:

Videos that need audio
Content requiring user controls
Educational or tutorial content

Need audio or controls? Use the Standard Video Player instead.