2015-01-09 2 views
0

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

Что-то вроде этого: http://wearefetch.com/

Как вы можете видеть, видео полноэкранный режим, но вы также можете прокручивать вниз.

Я немного искал в Интернете, но не нашел ничего особенно полезного. Если кто-то может подтолкнуть меня в правильном направлении, я был бы благодарен.

ответ

1

попробовать этот

video#bgvid { 
position: fixed; right: 0; bottom: 0; 
min-width: 100%; min-height: 100%; 
width: auto; height: auto; z-index: -100; 
background: url(polina.jpg) no-repeat; 
background-size: cover; 
} 

HTML

<video autoplay loop poster="polina.jpg" id="bgvid"> 
<source src="polina.webm" type="video/webm"> 
<source src="polina.mp4" type="video/mp4"> 
</video> 

Если ширина экрана ниже 800px

@media screen and (max-device-width: 800px) { 
html { background: url(polina.jpg) #000 no-repeat center center fixed; } 
#bgvid { display: none; } 
} 

visit here for more details

+0

Эй, спасибо, это сработало. Еще несколько мелких проблем здесь и там. Еще раз спасибо. –

+0

Что такое незначительная проблема? который из?? –

+0

Ну, видео будет вырезано с боков, если смотреть на меньших разрешениях, мне нужно посмотреть, что я могу с этим поделать. Но опять же этого можно ожидать. –

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