Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Use CSS width property for a responsive video player
The CSS width property can be used to create responsive video players that automatically adjust their size based on the container or viewport width. By setting width: 100% and height: auto, the video maintains its aspect ratio while scaling fluidly.
Syntax
video {
width: 100%;
height: auto;
}
Example: Basic Responsive Video Player
The following example creates a responsive video player that scales with the browser window −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
video {
width: 100%;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="video-container">
<h2>Responsive Video Player</h2>
<video controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>Resize the browser window to see the responsive behavior.</p>
</div>
</body>
</html>
A responsive video player with rounded borders appears on the page. The video automatically adjusts its width to match the container while maintaining its original aspect ratio. When you resize the browser window, the video scales proportionally.
Key Properties
| Property | Value | Purpose |
|---|---|---|
width |
100% |
Makes video fill container width |
height |
auto |
Maintains aspect ratio automatically |
max-width |
800px |
Prevents video from becoming too large |
Conclusion
Using width: 100% and height: auto on video elements creates responsive video players that adapt to different screen sizes. Combine with container max-width to control the maximum size and ensure optimal viewing on all devices.
Updated on: 2026-03-15T13:09:34+05:30
253 Views
Advertisements