Бывает есть желание разнообразить фон страницы, добавить что то этакое или просто по концепции сайта планируется использовать видеофон например на главной странице.
И так для добавления видеофона нам понадобится подготовить и оптимизировать видео ориентируясь на задачи проекта и его аудиторию иначе мы можем получить страницу которая будет очень долго закружатся.
С учетом того что разные браузеры поддерживают разные форматы видео то необходимо ролик для фона подготовить в трех видах:
- mp4 = H.264 + AAC
- ogv = Theora + Vorbis
- webm = VP8 + Vorbis
И так HTML разметка:
<video autoplay loop> <source src="video/video.mp4" type="video/mp4"> <source src="video/video.webm" type="video/webm"> <source src="video/video.ogv" type="video/ogg"/> </video>
Что бы наше видео занимало всю ширину экрана на сайте – добавляем советующие стили:
video{
position:fixed;
z-index:-1;
min-width:100%;
min-height:100%;
overflow:hidden;
}
Все это будет работать только в браузерах которые поддерживают HTML5 . Посмотреть какой формат для какого браузера можно тут.