DEV Community

Cover image for React Video Corner: The Ultimate Floating Video Player Component
Golam Kibria
Golam Kibria

Posted on

React Video Corner: The Ultimate Floating Video Player Component

Transform your React apps with this sleek, customizable floating video player! ✨

What is React Video Corner?

A lightweight, zero-dependency React component that creates a beautiful floating video player in the corner of your screen. Perfect for tutorials, demos, or any app that needs unobtrusive video content.

🌟 Key Features

  • 🎯 Smart Positioning: Choose from 4 corner positions (top-left, top-right, bottom-left, bottom-right)
  • 📱 Responsive Design: Automatically adapts to different screen sizes
  • 🎨 Fully Customizable: Control size, colors, border radius, and more
  • 🎥 Dual Video Support: Works with both local videos and YouTube URLs
  • ⚡ Zero Dependencies: No external CSS frameworks required
  • 🔧 TypeScript Ready: Full type safety out of the box
  • 🎮 Interactive Controls: Play/pause, mute/unmute, restart functionality
  • 👶 Tiny Bundle: Minimal impact on your app's performance

💻 Quick Start 

npm install react-video-corner
Enter fullscreen mode Exit fullscreen mode 
import { VideoCorner } from 'react-video-corner';

function App() {
  return (
    <VideoCorner
      videoSrc="/path/to/video.mp4"
      position="bottom-right"
      smallSize={150}
      largeSize={320}
      autoplay={true}
      initiallyMuted={true}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

🎨 Customization Options

  • Position: bottom-right | bottom-left | top-right | top-left
  • Sizes: Customizable small and large dimensions
  • Styling: Border color, background color, border radius
  • Behavior: Autoplay, initially muted, expand/collapse

🔥 Perfect For

  • Tutorial Websites: Show step-by-step guides without interrupting the main content
  • E-commerce: Product demonstrations that don't block the shopping experience
  • Documentation: Interactive help videos that stay accessible
  • Portfolios: Showcase your work with floating video previews
  • Educational Platforms: Supplementary content that enhances learning

🪧 Live Demo

Check out the interactive demo: https://g-k-shuvo.github.io/react-video-corner/

⁉️ Why Choose This Package?

  1. No CSS Dependencies: Uses inline styles, so no Tailwind or other CSS frameworks needed
  2. YouTube Integration: Seamlessly switch between local videos and YouTube content
  3. Accessibility: Built with keyboard navigation and screen reader support
  4. Performance: Optimized for smooth animations and minimal re-renders
  5. Maintenance: Actively maintained with regular updates and bug fixes

🛠️ Advanced Usage 

<VideoCorner
  videoSrc="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  isYoutube={true}
  position="top-left"
  smallSize={120}
  largeSize={400}
  borderRadius={20}
  borderColor="#3b82f6"
  backgroundColor="#ffffff"
  autoplay={false}
  initiallyMuted={false}
/>
Enter fullscreen mode Exit fullscreen mode

📦 Package Stats

  • Size: ~15KB gzipped
  • Dependencies: 0 (peer dependencies only)
  • TypeScript: Full support
  • React: 16.8+ (hooks support)
  • Browser: Modern browsers (ES6+)

🖇️ Links

💡 Pro Tips

  1. Use initiallyMuted={true} for better user experience (browsers block autoplay with sound)
  2. Set appropriate smallSize to avoid blocking important UI elements
  3. Consider position="bottom-right" for better mobile experience
  4. Use YouTube URLs for better performance with large video files

🎯 Use Cases

  • SaaS Onboarding: Guide users through features with floating tutorial videos
  • E-learning Platforms: Provide supplementary video content
  • Product Demos: Showcase features without leaving the main interface
  • Support Documentation: Interactive help videos
  • Portfolio Websites: Showcase projects with floating previews

😍 Get Started Today!

This package is perfect for developers who want to add professional video functionality to their React apps without the complexity of building it from scratch. The zero-dependency approach means it works with any React setup, and the extensive customization options ensure it fits your design perfectly.

Star the repo, try the demo, and let me know what you think! ⭐

Tags: #React #JavaScript #TypeScript #VideoPlayer #UIComponent #OpenSource #WebDevelopment #Frontend #NPM #Tutorial

Top comments (0)