Фоновое видео</brekotkin.mp4> <style> /* Убираем отступы и скрываем прокрутку */ body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: #000; } /* Видео на весь экран */ #bg-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translate(-50%, -50%); object-fit: cover; /* Растягивает видео, обрезая края, чтобы не было полос */ } /* Стили для нашей кнопки Mute */ #mute-btn { position: fixed; bottom: 20px; right: 20px; z-index: 100; padding: 10px 20px; background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid white; border-radius: 5px; cursor: pointer; font-family: sans-serif; backdrop-filter: blur(5px); transition: 0.3s; } #mute-btn:hover { background: rgba(255, 255, 255, 0.4); } </style> </head> <body> <video autoplay muted loop playsinline id="bg-video"> <source src="videos/movie.mp4" type="video/mp4"> Ваш браузер не поддерживает видео. </video> <button id="mute-btn">Включить звук</button> <script> const video = document.getElementById('bg-video'); const btn = document.getElementById('mute-btn'); btn.addEventListener('click', function() { if (video.muted) { video.muted = false; btn.textContent = 'Выключить звук'; } else { video.muted = true; btn.textContent = 'Включить звук'; } }); </script> </body> </html>