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 max-width property responsive for video player
The CSS max-width property can be used to make video players responsive by preventing them from exceeding their container's width while maintaining their aspect ratio. This ensures videos adapt smoothly to different screen sizes.
Syntax
video {
max-width: value;
height: auto;
}
Example
The following example demonstrates how to create a responsive video player using the max-width property −
<!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: 10px;
background-color: #f0f0f0;
border-radius: 8px;
}
video {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.info {
text-align: center;
margin-top: 10px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="video-container">
<video width="300" controls>
<source src="/html5/foo.mp4" type="video/mp4">
<source src="/html5/foo.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p class="info">Resize your browser window to see the responsive behavior.</p>
</div>
</body>
</html>
A responsive video player appears within a styled container. The video automatically scales down when the browser window is resized, never exceeding 100% of its container's width while maintaining its original aspect ratio.
Key Points
- max-width: 100% prevents the video from overflowing its container
- height: auto maintains the video's aspect ratio during scaling
- The video will scale down on smaller screens but never exceed its original size
- Works seamlessly with CSS Grid and Flexbox layouts
Conclusion
Using max-width: 100% with height: auto on video elements creates responsive video players that adapt to any screen size while preserving aspect ratios and preventing layout overflow.
Updated on: 2026-03-15T13:10:10+05:30
634 Views
Advertisements