Responsive Layout

Implementation

To create a responsive video player, wrap it in a container with a fixed aspect ratio and set the player width to 100%. This ensures the video maintains its proportions while scaling to fit the available space.

1import { VideoPlayer } from 'react-advanced-video-player';
2
3function ResponsivePlayer() {
4  return (
5    <div className="video-container">
6      <VideoPlayer 
7        src="https://example.com/video.mp4" 
8        width="100%"
9        height="auto"
10        controls
11      />
12    </div>
13  );
14}

Key Features

• Automatically scales to fit container width
• Maintains aspect ratio using aspect-video utility class
• Smooth scaling transitions
• Works across all screen sizes