Made on
Tilda
<!DOCTYPE html>
<html>
<head>
<title>Страничка с кнопкой и видео</title>
<style>
/* Стили для кнопки */
#myButton {
font-size: 24px; /* Увеличиваем размер шрифта */
padding: 20px 40px; /* Увеличиваем отступы внутри кнопки */
background-color: #4CAF50; /* Зеленый фон кнопки */
color: white; /* Белый текст на кнопке */
border: none; /* Убираем рамку кнопки */
border-radius: 10px; /* Закругляем углы кнопки */
cursor: pointer; /* Меняем курсор на "руку" при наведении */
box-shadow: 5px 5px 10px #888888; /* Добавляем тень для объема */
transition: background-color 0.3s; /* Плавное изменение цвета фона при наведении */
}
#myButton:hover {
background-color: #45a049; /* Более темный зеленый при наведении */
}
/* Стили для контейнера видео */
#videoContainer {
display: none; /* Изначально скрыт */
position: fixed; /* Фиксированное позиционирование, чтобы занять весь экран */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black; /* Черный фон за видео на весь экран */
z-index: 1000; /* Помещаем видео поверх всего остального контента */
display: flex; /* Используем flexbox для центрирования видео */
justify-content: center; /* Центрирование по горизонтали */
align-items: center; /* Центрирование по вертикали */
}
/* Стили для видео */
#myVideo {
max-width: 90%; /* Максимальная ширина видео 90% от экрана */
max-height: 90%; /* Максимальная высота видео 90% от экрана */
width: auto; /* Автоматическая ширина, чтобы сохранить пропорции */
height: auto; /* Автоматическая высота, чтобы сохранить пропорции */
}
</style>
</head>
<body>
<button id="myButton">НЕ НАЖИМАТЬ!!</button>
<div id="videoContainer">
<video id="myVideo" controls autoplay>
<source src="your_video.mp4" type="video/mp4">
Ваш браузер не поддерживает тег video.
</video>
</div>
<script>
const button = document.getElementById('myButton');
const videoContainer = document.getElementById('videoContainer');
const myVideo = document.getElementById('myVideo');
button.addEventListener('click', function() {
videoContainer.style.display = 'flex'; /* Показываем видео контейнер как flex-контейнер */
myVideo.play(); // Убеждаемся, что видео начинает проигрываться при показе контейнера. Важно, если autoplay не сработал.
myVideo.requestFullscreen(); // Запрашиваем полноэкранный режим
});
// Добавляем слушатель событий для окончания видео, чтобы скрыть контейнер (опционально)
myVideo.addEventListener('ended', function() {
videoContainer.style.display = 'none'; // Скрываем видео контейнер после окончания проигрывания
});
// Добавляем слушатель событий для кнопки Esc, чтобы выйти из полноэкранного режима и скрыть контейнер (опционально)
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' || event.code === 'Escape') {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
videoContainer.style.display = 'none'; // Скрываем видео контейнер при выходе из полноэкранного режима
}
});
</script>
</body>
</html>