FullPage JS Fixed Background Image

-2

Я использую FullPage JS и хотел бы реализовать фиксированный видеоролик с прокручиваемым контентом. У меня есть видео, установленное в разделе 1, однако при прокрутке он переходит на белый фон. Помощь будет замечательной!FullPage JS Fixed Background Image

#fullpage { 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

<div id="fullpage"> 
    <video autoplay loop muted id="myVideo"> 
      <source src="video/empty.mp4" type="video/mp4"> 
      <source src="video/empty.webm" type="video/webm"> 
     </video> 
</div> 





#myVideo{ 
     position: fixed; 
     right: 0; 
     bottom: 0; 
     top:0; 
     right:0; 
     width: 100%; 
     height: 100%; 
     background-size: 100% 100%; 
     background-color: black; 
     background-image: /* our video */; 
     background-position: center ; 
     background-size: cover; 
     object-fit: cover; 
     z-index: -1; 
     overflow: hidden 
}

источник

2016-04-17 PaKMaN

Почему вы делаете это настолько сложным? Проверьте этот простой учебник для видео фона. http://marketblog.envato.com/tips/video-background-html5-video/

Ниже фрагмент CSS выполнит эту работу за вас.

video { 
    margin: 0; 
    padding: 0; 
} 
.content { 
    position: relative; 
    z-index: 2; 
} 
.video { 
    position: fixed; 
    z-index: 1; 
}

соответствующий HTML часть

<body> 
<video id="my-video" class="video"> 
    <source src="media/demo.mp4" type="video/mp4"> 
    <source src="media/demo.ogv" type="video/ogg"> 
    <source src="media/demo.webm" type="video/webm"> 
</video> 
</body>

источник

2016-04-22 07:33:38 Mahesh

Вы даже взглянули на вашей ссылке? В нем вы можете видеть, что элементу полноэкранного видео требуется больше свойств .'.video { позиция: исправлена; верх: 50%; слева: 50%; z-index: 1; мин-ширина: 100%; мин-высота: 100%; ширина: авто; высота: авто; transform: translate (-50%, -50%); } ' – Alvaro

Мне кажется, что его проблема связана с фиксированными видео и использованием свойств' translate3d', используемых fullpage.js. – Alvaro

FullPage JS Fixed Background Image

ответ

Смежные вопросы