Как сделать видео фон для сайта за 5 минут | Создание landing page на bootstrap с нуля

Автор Liza Merichenko
Как сделать видео фон для сайта за 5 минут | Создание landing page на bootstrap с нуля

привет.

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

Страницы или одностраничника кому как удобнее.

Сегодня я вам расскажу как сделать видео фон который будет привлекать внимание создать красоту вашему. Ленину и какой-то динамику видеофон очень хорошо работает конечно же есть ли его правильно использовать сегодня просто вам расскажу как без знания программирования на своём посадочную страницу можно сделать видеофон который будет работать как на мобильных устройствах так и надо степных и то есть на версия для компьютера на мобильных устройствах он будет работать в качестве картинки для того чтобы не захламлять то пространство которое у вас есть на маленьком экране вы просто сделай картинку и так начнем ты так как — это всё будет выглядеть видим, что есть текст дали есть затемнённые фрагмент видео и непосредственно самого видео то есть идёт послойное такое наложение где мы видим главную упорный текст здесь мы можем делать и дополнительные кнопки также мы можем изменить текст. Далее идет блок уже с текстом. Сегодня мы будем — это внедрять в нашей. Ленин который я делал на прошлых видео смотреть. Обратите внимание сейчас есть две части — это 3 то есть первая часть адаптивный сайт с нуля где я рассказываю несколько способов как лучше создать сайт. Как создать себе лендинг и способов показываю есть вторая часть шаблон сайта под себя за 5 минут здесь я уже показываю. Как изменить информацию на лендинге под себя как поменять как поменять картинки. Сегодня он том же примере лендинга покажу как сделать видеофон я вот на данной странице. Вы, что вот в этом месте сейчас вот в этом месте сделать видеофон и так, что мы делаем мы опять открываем notepad-plus-plus — это текстовый редактор где мы как раз будем редактировать. В верстку нашего шаблона скачивать он бесплатно. Если вы ещё не скачали дали тот шаблон который вы скачали напоминаю bootstrap шаблон дерева находите в. Яндексе скачивать именно эти там текст меня эти картинки. Ты сейчас мы добавляем именно видеофон всё очень просто просто смотрите на то как я делаю. Повторяйте за мной. Смотрите мне нужно найти вот этот блок прямо в коде. То есть я выделяю название about автор и ищу. Этого plus-plus.tv нажимая доля. Вставляю найти и нажимаем найти. Вот как раз смотреть а. Витя вот он здесь находится то есть, а вот этот сектор натион выделяется когда его нажимает. Вот отсюда и до сюда. Это одна секция. Вот — это есть вот — это вот секция о авторе то есть изображения слева и справа текст нам нужно превратить — это полностью в одну секцию. Без двух колонок то есть мы выбираем теперь вот эту секцию где есть картинг, а то удаляем и конечно же нам нужно будет здесь попросили шестёрка. То есть всего состоит из 12 пустых ячеек у нас здесь 6 -. Это половина. Моя Зачем 13. Ну возможно вам — это делать то и не нужно будет. Можем проверить нажимаем сохранить нажимаем в 5 и всё. Витя одна секция появилась сейчас именно сюда мы будем составлять, что нам нужно будет сделать, а вот сейчас у меня здесь есть два окна обратите здесь у меня именно код от этого фона с видео. А здесь у меня окно — это именно сам сайт смотри, что мы делаем вам покажу то есть мы копируем CSS папочку прямо в корень нашего шаблона дали мы копируем папку имеешь прямо в корень нашего шаблона папку. Видео прямо в корень нашего шаблона всё скопировала. Отлично Теперь в нашем шаблоне есть файлы нашего шаблона плюс тот код для фона который необходим. Вы заметили, что я скопировал и теперь всё очень просто notepad-plus-plus. Мы открываем. Яндекс файл красоты тауфона. Вот его открыл и нам поставить вот эту строить вот эти вот этот кот вот мы выделяем и прямо вот сюда вот вместо этого текста копируем. Всё мы ставили то есть, что здесь показана смотрите, а здесь мы видим, что подхватывается Tag Video откуда нужно брать видео в папке видео есть план MP3 MP4 — это формат видеофайла также есть план webm то есть два формата может включаться один может 2 также есть папка видео планшет. То есть — это как раз картинка когда экран экран телефона маленький. Вот я могу с. Витя он превращается в картинку для того чтобы не захламлять трафик чтобы на мониторе было всё хорошо видно он превращается в картинку и так смотрите. Что ещё нужно сделать. Так им и стили сайта отсюда из этого шаблона тоже нужно будет их сделать вот эту папку я оставлю ссылку на неё. Вы можете её копировать себе на свой компьютер именно с фоном который движется с этим и копируем и прикрепляем суда CSS стили помещаем. ВХЛ вот прям где заканчивается в этих. А мы прямо отсюда его помещаем всё нажимаем сохранить и сейчас посмотрим, что у нас появилась нажимаем в 5 вас ничего не появилось сейчас как и у меня значит стиль в лендинге нужно немного подправить, что мы делаем мы переходим обратно в нашу папку. Где мы копировали заходим в CSS файл style.css. Мы открываем в текстовом редакторе далее открываем строку 21 и здесь нас интересует позиция против вот эти 24 строка мы её за камин тем чтобы она не использовал потому, что позиция просто съехала с ответ лингам и не подошло. Вот Мы закончили вот так вот наклонная черта потом звездочка в конце звёздочки наклонный черта она стала зелёным. То есть она не активна теперь возвращаемся наши нажимаем опять. Валя всё появилось простой пример фон на видео на сайте смотри теперь, что у нас делать, а то есть главный главный блок дали преимущества дали блог об авторе мы с вами изменили distal видеофайл. Витя всё шевелится дальше мы можем этот файл изменить этим посмотрим какой файл здесь находится вот здесь видео здесь есть два файла — это VPN формат MP4. Используйте MP4 от моего сейчас отдельно включим ведь он идёт секунд крыло самолёта — это видео в формате HD качество, что вы можете сделать.

0 комментариев
0

Читайте также