React Video Corner

A customizable React component for displaying videos in the corner of your screen with expand/collapse functionality. Perfect for creating floating video players that don't interfere with your main content.

Features

• 🎥 Multiple Video Sources: Support for both local video files and YouTube videos
• 📱 Responsive Design: Automatically adapts to different screen sizes
• 🎨 Highly Customizable: Control position, size, colors, and behavior
• ⚡ Lightweight: Minimal dependencies, optimized bundle size
• 🔧 TypeScript Support: Full TypeScript definitions included
• 🎮 Interactive Controls: Play/pause, mute/unmute, and restart functionality
• 📍 Flexible Positioning: Choose from 4 corner positions
• 🎯 Easy Integration: Simple props-based API

🚀 Live Demo

Try the Interactive Demo →

Installation

npm install react-video-corner

or

yarn add react-video-corner

Quick Start

import React from 'react';
import { VideoCorner } from 'react-video-corner';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <VideoCorner
        videoSrc="/path/to/your/video.mp4"
        position="bottom-right"
        smallSize={150}
        largeSize={320}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
videoSrc	string	required	URL or path to the video file, or YouTube URL
isYoutube	boolean	false	Set to true if using a YouTube video
position	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'	Position of the video corner
smallSize	number	150	Size of the video when collapsed (in pixels)
largeSize	number	320	Size of the video when expanded (in pixels)
borderRadius	number	100	Border radius for the video container
borderColor	string	'#3b82f6'	Color of the border around the video
backgroundColor	string	'#ffffff'	Background color of the video container
autoplay	boolean	true	Whether the video should autoplay
initiallyMuted	boolean	true	Whether the video should start muted
zIndex	number	1000	CSS z-index of the video container

Examples

Basic Usage

import { VideoCorner } from 'react-video-corner';

<VideoCorner
  videoSrc="/sample-video.mp4"
  position="bottom-right"
  smallSize={120}
  largeSize={300}
/>

YouTube Video

import { VideoCorner } from 'react-video-corner';

<VideoCorner
  videoSrc="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  isYoutube={true}
  position="top-left"
  smallSize={180}
  largeSize={400}
  borderColor="#ff0000"
  backgroundColor="#000000"
/>

Custom Styling

import { VideoCorner } from 'react-video-corner';

<VideoCorner
  videoSrc="/promo-video.mp4"
  position="bottom-left"
  smallSize={100}
  largeSize={350}
  borderRadius={20}
  borderColor="#00ff00"
  backgroundColor="#f0f0f0"
  autoplay={false}
  initiallyMuted={false}
  zIndex={9999}
/>

Multiple Video Corners

import { VideoCorner } from 'react-video-corner';

function App() {
  return (
    <div>
      <VideoCorner
        videoSrc="/video1.mp4"
        position="bottom-right"
        smallSize={150}
        largeSize={300}
      />
      <VideoCorner
        videoSrc="/video2.mp4"
        position="top-left"
        smallSize={120}
        largeSize={280}
        borderColor="#ff6b6b"
      />
    </div>
  );
}

Styling

The component uses Tailwind CSS classes internally, but you can override styles using the provided props. The component is designed to be self-contained and won't interfere with your existing styles.

Custom CSS (Optional)

If you need additional styling, you can target the component using CSS:

/* Target the video corner container */
.react-video-corner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Target the controls */
.react-video-corner .controls {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/g-k-shuvo/react-video-corner.git

# Install dependencies
npm install

# Build the library
npm run build

Demo Project

The repository includes a demo project that showcases all features:

# Install demo dependencies
npm run demo:install

# Start demo development server
npm run demo:dev

# Build demo
npm run demo:build

The demo will be available at http://localhost:5175 and includes:

• Interactive settings panel
• Real-time customization
• All component features demonstration

Testing

# Run linting
npm run lint

# Build the library
npm run build

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.0.0

• Initial release
• Support for local videos and YouTube videos
• Customizable positioning and styling
• TypeScript support
• Interactive controls

Support

If you encounter any issues or have questions, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact us at [gkshuvo24@gmail.com]

Acknowledgments

• Built with React
• Icons by Lucide
• Bundled with Vite