Using The width Property
If the width property is set to 100%, the video player will be responsive and scale up and down.
Note that the video player can be scaled up to be larger than its original size. In many cases, a better solution is to use the max-width property instead.
Example
Prompt
Create a page with a video element that uses
width: 100% and height: auto to make it responsive. Use any sample video source (e.g. a PromptCookbook sample video). The video should scale up and down with the browser window.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video with width</title>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Using The width Property</h1>
<p>Resize the browser window to see the effect.</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Using The max-width Property
If the max-width property is set to 100%, the video player will scale down if it has to, but it will never scale up to be larger than its original size.
Example
Prompt
Create a page with a video element that uses
max-width: 100% and height: auto to make it responsive. The video should scale down when needed but never grow larger than its original size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video with max-width</title>
<style>
video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Using The max-width Property</h1>
<p>Resize the browser window to see the effect. The video will scale down but never exceed its original size.</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Add a Video to the Example Web Page
You can add a video to your web page and make it responsive by setting width to 100% and height to auto. The video will resize to always take up all the available space.
Example
Prompt
Create a simple web page layout with a header, navigation, content section, and a responsive video using
width: 100% and height: auto. The video should always fill the available space in the content area.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video in Example Web Page</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
padding: 20px;
background: #1abc9c;
color: white;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.content {
padding: 20px;
}
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="content">
<h2>Responsive Video</h2>
<p>The video below will always take up all the available space:</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>