Как сделать - Полноэкранное видео
Узнать, как создать полноэкранный фон видео с помощью CSS.
Полноэкранное видео
Узнать, как создать полноэкранный фон видео, который охватывает все окно браузера:
Редактор кода »Создать полноэкранное видео
Шаг 1) Добавить HTML:
Пример
<!-- Видео -->
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<!-- Необязательно: некоторый текст наложения для описания видео -->
<div class="content">
<h1>Заголовок</h1>
<p>Lorem ipsum...</p>
<!-- Используйте кнопку для приостановки/воспроизведения видео с помощью JavaScript -->
<button id="myBtn" onclick="myFunction()">Пауза</button>
</div>Шаг 2) Добавить CSS:
Пример
/* Стиль видео: 100% ширина и высота, чтобы покрыть все окно */
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Добавить некоторые материалы в нижней части видео/страницы */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Стиль кнопка, используемая для приостановки/воспроизведения видео */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}Шаг 3) Добавить JavaScript:
При желании вы можете добавить JavaScript для приостановки/воспроизведения видео одним нажатием кнопки:
Пример
<script>
// Получить видео
var video = document.getElementById("myVideo");
// Получить кнопку
var btn = document.getElementById("myBtn");
// Приостановите и воспроизведите видео, а также измените текст кнопки
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Пауза";
} else {
video.pause();
btn.innerHTML = "Воспр";
}
}
</script>
Редактор кода »