Наверняка многие из вас задумывались о том, как добавить динамичности своему сайту, но не могли внести какие-либо глобальные изменения из-за того, что это сложно. В этой статье мы расскажем вам как сделать видео фоном сайта за 10 минут.
Вставка видео в фон сайта может придать динамичности вашему сайту и тем самым заинтересовать пользователя. Однако у этой затеи есть и негативные стороны. Во-первых, видео фон увеличивает вес сайта, что влияет на время загрузки сайта. Поэтому лучше заменить видео на простую картинку для тех, кто заходит с телефона или планшета.
Во-вторых, видео должно быть качественное, что тоже может стать проблемой. Однако эти проблемы решаемы, пусть и частично.
Как сделать видео фоном сайта
Сделать фоном видео очень просто. Для этого необходимо:
-
Вставить код в html:
Как выбрать и подготовить видео для фона сайта
Одна из проблем с подбором видео для фона сайта связана не только с самим подбором, но и с авторскими правами. Поэтому к поиску видео следует отнестись серьёзно. Ниже представлен список ресурсов, где вы можете найти и скачать подходящее бесплатное или платное видео:
Фон для видео: гайд по созданию съемочных сетапов В ДОМАШНИХ УСЛОВИЯХ
Также необходимо учитывать, что для кроссбраузерности следует добавлять видео в нескольких форматах, а именно .mp4 и .webm
Вот русскоязычный ресурс, на котором можно скачать программы для конвертирования видео в нужный формат.
Как добавить видео фоном в шаблон Moguta CMS
Куда вставлять файл видео, HTML-код и CSS-стили в шаблоне Moguta:
- Сам файл видео через хостинг загружаем в папку uploads;
- Через административную панель проходим путь — Настройки — Шаблон — template.php;
- Допустим, мы решили вставить видео сразу после шапки сайта. Ищем начало следующего блока и туда вставляем код:
Теперь у вас есть вся необходимая информация, чтобы узнать как вставить видео фоном сайта. Если у вас будут какие-либо вопросы — пишите нам в группу или в комментарии ниже, до новых встреч!
- Плавное подчеркивание ссылок для сайта
- Как установить reCAPTCHA на сайт
- Как подключить новый шрифт на сайт
Источник: moguta.ru
Видео фон для одностраничника
Здравствуйте уважаемые читатели! Речь пойдет о видеофоне.
Видео фон для одностраничника – это не только красиво, но это и высокая конверсия. Важную роль в интернет бизнесе играют «одностраничники», это страницы подписки, также продающие страницы.
С помощью одностраничных сайтов выстраиваются воронки продаж, кроме того эти странички должны привлекать внимание вашего посетителя.
Я тоже сначала «пошел этим путем», но меня в этом способе установки видеофона не устроило, то, что в код, нужно вставить ID видео с YouTube (видео которое используется для фона).
Если с кодом все понятно (все есть в уроке), то вот, то что ID с YouTube, это плохо. Зависимость от чужих ресурсов, всегда плохо.
YouTube «заглючит» или не дай бог, канал заблокировали. Тогда все ваши странички окажутся без видеофона. А если вы таких страничек наделали несколько десятков, будет обидно.
Видео фон в Adobe Muse
И я нашел выход, это программа Adobe Muse. Ни каких кодов, никакого программирования.
Первую страничку я сделал за 3 часа, вторую за час, а все последующие за 15 мин. Эту страничку я делал долго, потому что по ходу изучал программу.
Теперь послушайте меня внимательно и у вас все получится, и вы сможете «клепать» любые одностраничные и многостраничные сайты или просто странички подписки.
Во-первых, все графические программы имеют интерфейс, чем-то похожий друг на друга. Умеете немного работать в Photoshop, значит и в Adobe Muse сможете.
Посмотрите пару уроков для новичка (полно в YouTube), чтобы иметь минимальное понятие о программе. Если вы не собираетесь делать какие-то навороченные сайты, то для подписных и продающих страничек, вам хватит начальных знаний.
По шаблону, такие странички можно сделать за 10-15 минут, а если хотите что-то новенькое, чуть подольше. Все будет зависеть от вашей фантазии и умения.
Сейчас я вам покажу на одном примере, как сделать страницу подписки. Я не буду вам показывать, как установить программу, какие у нее возможности. Не буду показывать настройки программы.
Просто покажу, как быстро делаются странички в Adobe Muse.
Открываем программу.
Выбираем слева в панели инструментов «Прямоугольник» ( 1 )
Перетаскиваем на рабочую область ( 2 ) и за маркеры ( 3 ), растягиваем на всю рабочую область.
Идем в верхнюю панель, пункт «Заливка». Как видите можно залить сплошным цветом, можно градиентом, настроить непрозрачность.
Но если нажать на пункт «Изображение — Добавить», то можно выбрать рисунок (у себя на компьютере) для фона. Его можно растянуть по горизонтали, вертикали, произвольно.
Еще раз повторяю, у меня не стоит цель досконально обучить вас работе с программой Adobe Muse. Я хочу лишь показать, как быстро сделать одностраничник.
Получится фон будущей странички. Пока делаем без видео фона.
Опять берем прямоугольник в левой панели, устанавливаем в нужном месте и заливаем каким-то цветом (черным), делаем непрозрачность 60% (вы делаете как хотите) – это будет место для формы подписки.
На рис. ниже ( 1 ) Все настройки находятся в разделе «Заливка», см. рис. выше. Теперь сделаем «шапку» ( 2 ) с заголовком продукта или с призывом к действию.
Опять берем прямоугольник и растягиваем на всю ширину рабочей области. Высоту делаем по своему усмотрению. Цвет, непрозрачность выбирайте сами.
Чтобы написать текст, выбираем буква «Т» ( 1 ), в левой панели и выделяем область в любом месте (потом перетащим). Пишем текст, «Видеокурс по работе с программой Adobe Muse» ( 2 )
Когда нажмете букву «Т», в верхней панели увидите кнопку для настройки шрифта (цвет, размер, начертание)
Точно также делаем еще одну прямоугольную область, заливаем каким-то цветом (бардовым), делаем надпись, например, «Adobe Muse», как на рисунке.
Теперь нужна форма подписки. У меня рассылка на SendPulse, на ней я и буду показывать. Берем на сервисе рассылок код вашей формы, копируем в буфер обмена идем в программу Adobe Muse.
Кликаем правой кнопкой мыши на черном прямоугольнике и выбираем пункт «Вставить». Равняем по размеру прямоугольника. То, что видите справа (белая область), в браузере ее видно не будет.
Идем в меню «Файл» — «Предварительный посмотреть страницу в браузере», вот, что у нас получилось.
Пустое место над формой подписки, можно чем-то заполнить, например, вставить картинку (коробка, обложка) Вставляется просто, берете и перетаскиваете картинку мышкой в окно программы.
Делаем видеофон
Теперь осталось вместо простого фона, сделать видеофон.
Делайте все по порядку.
Первое. Найдите видео для фона. Оно должно быть хорошего качества и с хорошим разрешением, 10-15 сек., не более (иначе страничка будет долго грузится).
«Вбейте» в поиске «видеофон», «видео для фона» или что-то подобное. Можно просто вырезать кусочек из понравившегося видео (найдете на YouTube).
Видео должно быть в двух форматах, один файл в формате mp4 (например, fon.mp4) и второй в формате webm (например, fon.webm). это для того, чтобы фон отображался во всех браузерах.
Для конвертации видео в любые форматы, предлагаю конвертор, Aimersoft Video Converter Ultimate , но может у вас стоит какой-то свой, пожалуйста, пользуйтесь им.
Второе. Сделайте скриншот с экрана, он должен быть в формате jpg (например, fon.jpg). Это для того, чтобы, когда видео долго загружается, будет видна эта заставка.
Третье. Самое главное, нужен виджит для программы Adobe Muse, с помощью которого вставляется видеофон (без всякого программирования).
Называется виджит, Musegrid Fullscreen Video. Расширение у файла виджита должно быть .mulib (примерно так, Musegrid Fullscreen Video.mulib)
Как установить виджит
Откройте программу, кликните 2 раза по файлу виджита, и он сам автоматически установится.
После этого, правая панель, пункт Библиотека, виджит должен появится там.
Ставим видеофон на страницу подписки.
Сначала уберите фон со странички. Для этого заходим «Слои», в правой панели и отключаем слой с фоном, как в Photoshop (кнопочка рядом со слоем фона).
У меня слой находится в самом низу. Как видите фон исчез.
Теперь нужно скопировать файлы, которые вы приготовили, в программу, это файлы: fon.mp4, fon.webm, fon.jpg
Для этого заходим в меню «Файл – Добавить файлы для передачи…» и копируем свои приготовленные файлы.
Подключаем виджит
Заходим в «Библиотека», выбираем свой виджит и перетаскиваем его на любо место вашей странички (его видно не будет)
Настройки виджита
( 1 ) Открывает меню настроек
( 2,3,4 ) ваши файлы (названия файлов должны быть написаны латинскими буквами)
( 5 ) Повтор видео (видео зацикливается)
( 6 ) Звук (включитьотключить), если он у вас есть.
ВСЁ! Смотрим, что получилось
Загружаем страничку, к себе на хостинг
Сначала нужно сохранить проект на компьютере. Заходим «Файл – Экспортировать как HTML» Указываем свой домен, путь на компьютере, куда будет сохранен проект.
Теперь осталось только загрузить файлы к себе на хостинг. У меня вот такие файлы.
Открываем любой файловый менеджер и загружаем файлы на хостинг, в какую-нибудь папку (лучше создать отдельную папку)
После загрузки файлов, ваша страничка откроется по адресу:
http://ваш домен/ваша папка на хостинге/index.html
Потренируйтесь и вы будите, как я говорил раньше, делать странички на раз, два.
Оцените статью
Источник: myobzors.ru
Делаем видео-фон для блока с помощью CSS
В моем примере используется максимально вычищенный, но рабочий код, так же в коде есть несколько элементов, которые нужны для дизайна данного блока, но вовсе не обязательны.
Для мобильных телефонов видео будет отключено, и на фон будет установлена статичная картинка.
Мой HTML будет выглядеть так:
Рабочий пример блока с видео-фоном:
На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в…
Делаем кликабельным с помощью CSS (проблема была замечена только в Chrome) Вешаем ссылку на…
Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения…
Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…
Источник: denis-creative.com