Как правильно реализовать полноэкранную видеозаставку?

Question

[YVW]

Рисую макет по сетке бутстрап 970px
Естественно, сайт планируется сделать адаптивным
Первый блок на нем – видеозаставка
вопрос 1: при отрисовке макета какую высоту задавать для блока с видеобэкграундом, учитывая еще браузерную верхнюю панель?
вопрос 2: для мобильной версии сайта предпочтительнее заменить видео на картинку? или создать еще одну версию видео, оптимизированную для маленьких экранов?
как вообще правильнее всего подойти к этому вопросу и учесть все нюансы для адаптации видео и его подгонке к разным экранам?

Comments

[andymiller]

Рекомендую воспользоваться плагином vide.js на гитхабе сорсы. Вещь адаптивная, на мобильных автоматном заменяет видео на картинку которое должно иметь одинаковое имя с видео

Answer 1

[Григорий]

/* Высота панели */
.nav {
 height: 40px
}
/* Высота блока с видео/картинкой */
.video-container {
 height: calc(100vh - 40px);
}
/* Видео отображается только на больших экранах */
video {
 display: none
}
@media (min-width:769px) {
 video {
  display: block;
 }
}

Нужно ещё учесть, что на мобильных нет автопроигрывания видео.

Answer 2

[weredy]

Viewport units?

Comments

[weredy]

YVW Ну я имею ввиду "vh"

Answer 3

[andymiller]

Рекомендую воспользоваться плагином vide.js на гитхабе сорсы. Вещь адаптивная, на мобильных автоматном заменяет видео на картинку которое должно иметь одинаковое имя с видео
Не нужно изобретать велосипед

Answer 4

[dzenn]

Есть решения которые можно найти по первым пяти ссылкам гугла