Подсказки: применение видео в качестве фонов

Подсказки: применение видео в качестве фонов

От автора: Итак, вы видели в сети видеоролики, используемые в качестве фонов, и думали: «Как это сделать?». Основная проблема тут – добиться того, чтобы ролик закрыл весь экран. Обычно при установке видео оно масштабируется в соответствии с соотношением размеров, что значит, оно не сможет закрыть весь фон. Но не беспокойтесь, потому что я здесь для того, чтобы сопроводить вас в вашем захватывающем квесте к свободе фонового видео. Читайте, юный воин.

скачать исходникидемо

Срываемся в полет

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Далее нужно немного CSS, чтобы установить контент абсолютно позиционированным поверх видео:

Отлично! Теперь все, что нужно сделать – придумать, как заставить видео растянуться во всю ширину экрана. Нам для этого придется воспользоваться магией Javascript’а:

Немного Javascript’а

Как уже говорилось, проблема в том, что соотношение размеров видеоролика сильно осложнит покрытие всего экрана. Как это исправить? Нам придется сравнить соотношение размеров окна с соотношением размеров видео. Затем можно умножить ширину видео, и путем этого расчета сделать так, что ролик будет всегда заполнять весь экран, вне зависимости от его размера. Не забудьте включить jQuery! Ваш код должен выглядеть примерно так:

Вот теперь видеоролик закроет весь экран при изменении его размера пользователем! Следует запомнить:

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

То же самое касается IE8 и ниже! Для этих браузеров будет применяться изображение poster.jpg.

Полноэкранные фоновые видеоролики – настоящая бомба веб-дизайна, поэтому я уверен, что вы найдете им применение. Примененный мной материал взят с Vimeo’s free HD Stock Footage, так что идите туда посмотрите. Хорошего вам дня!

Автор: Johnny Simpson

Источник: http://www.inserthtml.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (8)

  1. Евгений

    Исходники не скачиваются :(

  2. Ольга

    Жаль, что администратор не читает, и поэтому не отвечает на комментарии.Видно не заинтересован, чтоб пользователи правильно понимали и разбирали тему!

    • Андрей Кудлай

      Комментарии, насколько я понял, касались исходников. Поправили ссылку и теперь исходники можно скачать.

      • Ольга

        Подскажите, для какой цели в исходниках 2 одинаковых видео файла flowers.mp4 и flowers.webm Один выполняет роль фона, а второй для чего?

        • Андрей Кудлай

          По всей видимости для того, чтобы видео фон увидели пользователи, у которых не установлены кодеки для просмотра первого файла — .mp4, т.е. это своеобразный запасной вариант. Формат WebM же не требует дополнительных кодеков и уже поддерживается современными браузерами по умолчанию.

  3. Владимир

    Оцените пожалуйста еще один сайт с видеофоном – сайт «Живая Удмуртия» – liveudm.ru не напрягает ли посетителей? Важно объективное мнение. Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree