HTML - Отзывчиво размещаем видео на заднем плане - PullRequest
Новая
       14

HTML - Отзывчиво размещаем видео на заднем плане

0 голосов
/ 05 октября 2018

Я пытаюсь внедрить видео фон на свой сайт.Я хочу, чтобы это было в верхней части страницы (это означает, что независимо от высоты окна, когда скроллеры в самом верхнем положении, это должно быть целое видео на заднем плане), и я помещу некоторыесодержание на переднем плане видео также ниже видео.На данный момент я использую следующий CSS: 

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

Мой HTML структурирован так: 

<header>
  <video autoplay muted loop id="myVideo">
    <source src="video.mp4" type="video/mp4">
  </video>

  <div class="container">
    --- Content on the foreground
  </div>
</header>
<section>
  -- Content below the video
</section>

На данный момент я получаю желаемый результат на полной странице, но он не отвечает,Когда я уменьшаю размер экрана, видео остается на полном экране, как я хочу, но контент под видео перемещается вверх и перекрывается с видео.Как я могу это исправить?

1 Ответ

0 голосов
/ 05 октября 2018

Из кода, который вы дали, ваш элемент #myVideo был исключен из обычного потока документа, поэтому другие элементы игнорируют его, что нормально, но он расположен относительно области просмотра, а не элемента header.Создайте правило, предназначенное для элемента header, как показано ниже: 

header {
    height: 100vh;
    position: relative;
}

Если сделать его position: relative, это будет означать, что видео расположено относительно него, а высота header будет равна 100% отВысота окна просмотра.Приведенный ниже код помещает элемент #myVideo в верхний левый угол элемента header и делает его на 100% шириной / высотой элемента header. 

#myVideo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
...