Как создать полноэкранный видео-фон в HTML и CSS, где все мои компоненты идут поверх него? - PullRequest
Новая
       2

Как создать полноэкранный видео-фон в HTML и CSS, где все мои компоненты идут поверх него?

1 голос
/ 22 октября 2019

Мне нужно создать полноэкранный видео фон, где все мои компоненты лежат поверх него. Моя кнопка отображается поверх нее, но мой оверлейный инструмент навигации находится под ней. Я уже сделал z-Score 1. В целом, я ищу самый простой способ создания новых функций и компонентов на моей веб-странице, где все они лежат поверх моего фонового видео. 

function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

// Enter Code Here

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- The video -->
  <video autoplay muted loop id="myVideo">
    <source src="./DJI Mavic 2 Zoom Test Footage from Vancouver, Canada.mp4" type="video/mp4">
  </video>

  <!-- Optional: some overlay text to describe the video -->
  <div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum...</p>
    <!-- Use a button to pause/play the video with JavaScript -->
    <button id="myBtn" onclick="myFunction()">Pause</button>
  </div>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>

  <h2>Fullscreen Overlay Nav Example</h2>
  <p>Click on the element below to open the fullscreen overlay navigation menu.</p>
  <p>In this example, the navigation menu will slide in, from left to right:</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Вы также можете закодировать ваше видео в GIF, если оно короткое. затем используйте этот GIF в качестве фона.

Внешние ссылки на видео могут загружаться долго, а видеофайлы могут быть тяжелыми. GIF позволит вам добавить анимацию (если она достаточно проста) и обеспечить быструю загрузку вашего сайта.

есть множество бесплатных видео для конвертеров GIF онлайн https://www.onlineconverter.com/video-to-gif

0 голосов
/ 22 октября 2019

Этот код работает, я добавил видео на YouTube в фоновом режиме: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#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;
}
</style>
</head>
<body>

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/OVct34NUk3U?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

</body>
</html>

Поместите его в файл .html, и все готово.

Посмотрите, это будетпомощь: https://www.labnol.org/internet/youtube-video-background/27933/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...