Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

12 февраля 2015 г. -

Иногда на промо-страничках или landing page, применяют такое интересное решение, как видеофон (video background). Главный плюс такого эффекта - это выделиться среди конкурентов. Ведь ваша страничка станет более необычной, чем у всех остальных.

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

Поэтому давайте разберем, как такие видеофоны создаются.

HTML

Главной основой такого фона, является тег video, который появился в HTML5. Его можно расположить перед закрывающим тегом body.

Обратите внимание на атрибуты тега video:

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

loop - начинает повторное воспроизведение видео после его окончания.

<video id="video_bg" autoplay="autoplay" loop="loop"> <source src="video/background.mp4" type="video/mp4"></source> <source src="video/background.webm" type="video/webm"></source> </video>

И также обратите внимание на формат видео, если вы хотите добиться воспроизведения видеофона в большинстве браузеров, то ваш ролик должен быть как минимум в двух форматах в MP4 и WebM.

Важно: при конвертации видео в формат MP4, обязательно выберите видео кодек H.264, иначе ваше видео не будет воспроизводиться в браузере IE.

CSS

Чтобы наше видео стало именно фоном, то для него необходимо задать ряд CSS свойств.

body { / Задаем фон для нашей страницы в виде обычного изображения. Это нужно на случай, есть браузер не смог воспроизвести видео из-за того, что он не поддерживает тег video. / background: fixed url(images/video_bg.jpg) no-repeat; background-size: cover; } #video_bg { / Делаем так, чтобы видеофон занимал фиксированное положение. / position: fixed; top: 0; left: 0; / Располагаем наш фон под всем содержимым на странице. Для этого используем отрицательный z-index. / z-index: -1000; / Растягиваем видео так, чтобы не было видно черных полос и чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. / min-width: 100%; min-height: 100%; width: auto; height: auto; }

Центрирование видеофона

Если вы все сделали правильно, то сейчас на вашей странице должен появиться видеофон и в принципе, со своей задачей мы справились.

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

Используя описанный выше способ, наш видеофон будет занимать не центральное, а верхнее левое положение (Чтобы посмотреть попробуйте в демо изменить размер окна браузера).

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

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

@media (min-aspect-ratio: 16/9) { #video_bg { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { #video_bg { width: 300%; left: -100%; } } @supports (object-fit: cover) { #video_bg { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } }

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


Источник: http://webcareer.ru/videofon-dlya-sajta-video-background.html


Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт

Как сделать видеофон на сайт