Как подогнать фоновое видео ко всем размерам экрана

Разрабатываю сайт с видео-фоном. При загрузке страницы видео умещается на всех экранах. Затем мы прокручиваем, чтобы отобразить остальной контент сайта. К видеоконтенту я хочу поместить заголовок и некоторый контент. Мне нужно ровно как https://fishermenlabs.com/. пожалуйста, помогите мне. пожалуйста, проверьте мой код ниже. это не работает. Помогите, пожалуйста.

   <div class = "vdbg">   
    <div class = "video">  
      <video autoplay muted loop id = "myVideo">
       <source src = "images/cnk.mov" type = "video/mp4">
      </video>
    </div> 
   </div>

Пожалуйста, проверьте мой код css

 .vdbg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
    background-color: #000;
    }
   #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    opacity: 0.5;
    background-color: #000;
   }

jquery html css

27.10.2018 05:11

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

608

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам понадобится контейнер div, который умещается на экране, а затем добавить к видео класс, который изменит его размер до ширины или высоты.

CSS:

.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}

.videoPlayer {
    min-height: 100%;
    //min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}

HTML:

<div class = "container"><video class = "videoPlayer">Code goes here</video></div>

Или прочтите это .. Источник: WesBOS

После контейнера div я хочу разместить контент сайта. Я пытаюсь, но содержимое отображается над div видеоконтейнера.

— 27.10.2018 05:31

Пожалуйста, проверьте этот пример >> ссылка

— 27.10.2018 05:34

Чем ты. Но клиент хочет отображать видео в полноэкранном режиме или соответствовать всем размерам экрана при загрузке веб-сайта.

— 27.10.2018 05:42

Раньше я делал фоновое изображение, но не могу работать с видео. Помогите, пожалуйста

— 27.10.2018 05:44

27.10.2018 05:21

Фоновое видео

Основная идея следующей демонстрации состоит в том, что у вас есть тег видео отдельно от остальной части макета и присваивается ему z-index:-1. Для остальной части макета расположите его так, как хотите, но убедитесь, что у каждого родственника тега видео есть background:none.

Демо

html {
  font: 400 16px/1.5 Verdana;
  height: 100vh;
  width: 100vw;
  padding: 0 2em 0 0;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
  background: none;
  padding: 0 2em 0 0;
}

#vid {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 100vw;
  min-height: 100vh;
  opacity: 0.5;
  background-color: #000;
  z-index: -1;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: none;
  padding: 0 2em 0 0;
}

header {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

h1 {
  font-size: 5vw;
  line-height: 1.1;
  letter-spacing: 3px;
  white-space: nowrap;
  margin: 0 auto;
}

aside {
  margin: 0 0 0 70vw;
  width: 25vw;
}

summary {
  border: 2px solid #fff;
  font-size: 1.2rem;
}

address {
  font-size: 1em;
}

<video autoplay muted loop id = "vid">
       <source src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" type = "video/mp4">
</video>
<main>
  <aside>
    <details>
      <summary>Contact</summary>
      <address>
        400 Monte Clair St.<br>
        New York, NY 10001<br>
        [email protected]
      </address>
    </details>
  </aside>
  <header>
    <h1>Main Title That is Long <br>Enough to Wrap Around</h1>
  </header>
</main>

27.10.2018 06:07