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

Рисую макет по сетке бутстрап 970px
Естественно, сайт планируется сделать адаптивным
Первый блок на нем – видеозаставка
вопрос 1: при отрисовке макета какую высоту задавать для блока с видеобэкграундом, учитывая еще браузерную верхнюю панель?
вопрос 2: для мобильной версии сайта предпочтительнее заменить видео на картинку? или создать еще одну версию видео, оптимизированную для маленьких экранов?
как вообще правильнее всего подойти к этому вопросу и учесть все нюансы для адаптации видео и его подгонке к разным экранам?
  • Вопрос задан
  • 947 просмотров
Пригласить эксперта
Ответы на вопрос 4
TMGLUK
@TMGLUK
UX-дизайнер
/* Высота панели */
.nav {
 height: 40px
}
/* Высота блока с видео/картинкой */
.video-container {
 height: calc(100vh - 40px);
}
/* Видео отображается только на больших экранах */
video {
 display: none
}
@media (min-width:769px) {
 video {
  display: block;
 }
}


Нужно ещё учесть, что на мобильных нет автопроигрывания видео.
Ответ написан
@andymiller
Рекомендую воспользоваться плагином vide.js на гитхабе сорсы. Вещь адаптивная, на мобильных автоматном заменяет видео на картинку которое должно иметь одинаковое имя с видео
Не нужно изобретать велосипед
Ответ написан
dzenn
@dzenn
Есть решения которые можно найти по первым пяти ссылкам гугла
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы