Использование свойства width
Если свойству width задано значение 100%, видеоплеер будет адаптивным и будет увеличиваться и уменьшаться.
Обратите внимание, что видеоплеер может увеличиться больше своего исходного размера. Во многих случаях лучшим решением является использование вместо этого свойства max-width.
Пример
Prompt
Создайте страницу с элементом video, который использует
width: 100% и height: auto, чтобы сделать его адаптивным. Используйте любой пример видео (например, демонстрационное видео из PromptCookbook). Видео должно увеличиваться и уменьшаться вместе с окном браузера.
Результат: полная HTML-страница
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>
Использование свойства max-width
Если свойству max-width задано значение 100%, видеоплеер уменьшится при необходимости, но никогда не увеличится больше своего исходного размера.
Пример
Prompt
Создайте страницу с элементом video, который использует
max-width: 100% и height: auto, чтобы сделать его адаптивным. Видео должно уменьшаться при необходимости, но никогда не увеличиваться сверх своего исходного размера.
Результат: полная HTML-страница
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>
Добавьте видео на пример веб-страницы
Вы можете добавить видео на свою веб-страницу и сделать его адаптивным, задав width значение 100%, а height значение auto. Видео будет изменять размер, чтобы всегда занимать всё доступное пространство.
Пример
Prompt
Создайте простой макет веб-страницы с заголовком, навигацией, секцией контента и адаптивным видео, используя
width: 100% и height: auto. Видео должно всегда заполнять доступное пространство в области контента.
Результат: полная HTML-страница
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>