Главная | Видеофон для сайта
Видеофон для сайта
Возможность использовать в качестве фона для сайта любой видеоматериал - это широчайшие возможности для Вашей буйной фантазии!
На этом сайте в качестве background использованы видеофайлы, найденные и скачанные с ЮТУБ-а.
Использовано 2 ролика разного формата - WEBM и MP4, хотя можно было обойтись только одним MP4. Но WEBM - более "продвинутый" формат, поддерживаемый практически всеми современными браузерами, а формат MP4 предназначен только для IE (шоб он скис!).
Можете проверить сами в разных браузерах. Ролики на этом сайте РАЗНЫЕ, соответственно, например, в ХРОМ-е и IE будут отображаться РАЗНЫЕ видеофоны.
Этот код можно разместить в шаблоне для всех страниц сайта, для отдельных его разделов, или только на определенных страницах.
Код:
- autoplay - автозапуск
- loop - повторение цикла просмотра, т.е. переход с последнего кадра на первый. Учтите, что при их несовпадении будет заметны скачкИ видеопотока. А если его (loop) не указывать, то видео остановится на последнем кадре статической картинкой. Реализация того или иного варианта зависит только от вашей творческой фантазии.
CSS:
object-fit - управление соотношением сторон и способом масштабирования. Сохраняет, или искажает пропорции. Может принимать значения:
- cover - видео масштабируется с сохранением пропорций, чтобы целиком заполнить заданную область. Т.е. при несовпадении пропорций видео и экрана правый-левый, или верхний-нижний края ролика могут уйти ЗА пределы экрана.
- fill - видео масштабируется без сохранения пропорций, чтобы соответствовать заданным размерам. Т.е. при несовпадении пропорций видео и экрана картинка будет сжата, или растянута - по вертикали, или горизонтали.
Связанные документы
