Добавление видеофона на страницу.


Бывает есть желание разнообразить фон страницы, добавить что то этакое или просто по концепции сайта планируется использовать видеофон например на главной странице.

И так для добавления видеофона нам понадобится подготовить и оптимизировать видео ориентируясь на задачи проекта и его аудиторию иначе мы можем получить страницу которая будет очень долго закружатся.

С учетом того что разные браузеры поддерживают разные форматы видео то необходимо ролик для фона подготовить в трех видах:

  • 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 . Посмотреть какой формат для какого браузера можно тут.

#html #CSS

Copyright © 2013-2017