1. Смотри видео
2. YouTube
3. Vimeo
4. Советы по дизайну
5. Шаг 1 - найдите URL вашего видео
6. YouTube
7. Vimeo
8. Шаг 2 - Добавить видео
9. Фон обложки
10. Баннер страницы
11. Экран блокировки
12. Шаг 3 - Добавить фильтр
13. Шаг 4 - Измените скорость воспроизведения (только YouTube)
14. Шаг 5 - Добавление мобильного запасного изображения
15. Шаг 6 - Добавьте цвет наложения (только обложки)
16. Отключить фоновое видео
17. Видео баннеры в индексе

Вы можете вставлять фоновые видео с YouTube и Vimeo на титульные страницы и баннеры некоторых шаблонов. Фоновое видео воспроизводится в режиме без звука и добавляет динамический визуальный эффект на ваш сайт.

Фоновые видеоролики извлекаются из URL-адресов общего доступа к видео Vimeo или YouTube. Для индивидуального оформления вы можете применять стилизованные фильтры и накладывать цвета.

Смотри видео

Прежде чем вы начнете

Общие советы

• Цвет фона страницы или баннера будет отображаться во время буферизации видео. Если загрузка видео занимает несколько секунд, на экране может появиться резервное изображение. Время загрузки зависит от вашего интернет-соединения.
• Видео-баннеры иногда не отображаются на мобильных устройствах, в зависимости от скорости соединения посетителя и версии браузера. Установить мобильное резервное изображение появляться, когда не удается загрузить видео-баннер.
• Для видео нет ограничения по времени, хотя более короткие видео могут отображать цвет фона чаще при зацикливании.
• Фоновые видео не поддерживают встраивание кода.

YouTube

• Установите видео на Public / Unlisted а также разрешить встраивание , Частные видео YouTube не отображаются в качестве фоновых видео.
• запрещать Наложение рекламы , Если в вашем видео включена оверлейная реклама, она будет отображаться поверх фонового видео.
• В зависимости от выбранного макета и устройства, которое используют ваши посетители, они могут ненадолго увидеть логотип YouTube в правом нижнем углу видео. Вы можете сделать это более тонким, применяя Размытие фильтра на ваше видео.
• Видеообъявления Воспроизведение до видео, также известного как предварительная реклама, не будет воспроизводиться на фоновом видео.

Vimeo

• Вы должны иметь План Vimeo Plus или выше добавить фоновое видео из Vimeo.
• Изменить настройки конфиденциальности Vimeo чтобы убедиться, что ваши видео могут быть встроены. Установите видео на Anyone и разрешите встраивание Anywhere . Частные видео Vimeo не отображаются в качестве фоновых видео.
• Вы также можете настроить скрытие этого видео с Vimeo.com и разрешить встраивание только на выбранные мной сайты .

Советы по дизайну

Фоновые видео - отличный способ добавить визуальный интерес вашему сайту, но они не должны отвлекать вас от другого контента вашего сайта. Вот несколько советов, которые сделают ваше фоновое видео великолепным.

Держите видеофайл маленьким

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

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

Мы рекомендуем использовать видео с:

• Частота кадров около 25 кадров в секунду.
• Разрешение 720p, что составляет 1280 х 720 пикселей.

Выберите контент с плавными переходами

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

Обеспечить контраст с текстом

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

Если контраста недостаточно, вы можете:

Шаг 1 - найдите URL вашего видео

Чтобы добавить фоновое видео, загрузите его на Youtube или Vimeo и найдите его общий URL-адрес. Невозможно загрузить видео непосредственно в Squarespace или вставить видео, размещенное в другом сервисе.

YouTube

1. Создать или войти в Аккаунт YouTube ,
2. Загрузить видео или найдите тот, который вы уже загрузили.
3. Убедитесь, что видео установлено на Unlisted / Public а также позволяет встраивать ,
4. Скопируйте URL ссылки на видео.

Vimeo

1. Создать или войти в Vimeo аккаунт ,
2. Загрузить видео или найдите тот, который вы уже загрузили.
3. Убедитесь, что видео установлено на Кто-нибудь а также позволяет встраивать ,
4. Скопируйте URL ссылки на видео.

Шаг 2 - Добавить видео

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

Примечание

. Пока вы не добавите свой URL, вы увидите короткое видео об океане в качестве демо-заполнителя.

Фон обложки

Чтобы добавить видео на титульную страницу:

1. Откройте существующую титульную страницу или добавьте новую:

• Для одностраничных сайтов титульных страниц: в главном меню нажмите « Медиа» .
• Для титульных страниц, добавленных на веб-сайты или в магазины: в главном меню нажмите « Страницы» .

Поддерживаемые макеты

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

Есть несколько исключений. Эти макеты отображают видео по-разному:

• Вспышка - отображается на боковой панели
• Spotlight - отображается на боковой панели
• Виньетка - Отображение на боковой панели
• Backstory - Отображение на боковой панели
• Сессия - отображается на боковой панели
• Фокус - Отображает в круглой портретной области
• Монокль - отображает в круглой портретной области
• Флагман - не поддерживает видео
• Гавань - не поддерживает видео

Баннер страницы

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

Чтобы добавить видео на баннер страницы:

1. В главном меню нажмите « Страницы» .
2. Наведите указатель мыши на заголовок страницы на левой панели и нажмите ,
3. Нажмите вкладку Медиа .
4. На вкладке « Медиа » перейдите на вкладку « Видео ».
5. Вставить URL вашего видео в поле URL видео .

Поддерживаемые шаблоны

Вы можете добавить баннеры на перечисленные типы страниц для этих шаблонные семьи :

• Adirondack - макет, продукт, альбом, события, блог
  
• Бедфорд - макет, продукт, альбом, события, блог
  
• Рассол - Макет, Альбом, События, Блог
  
• Five - Макет, Альбом, События, Блог
  
• Монток - Макет, События, Блог, Индекс. Должен иметь мобильный запасной образ ,
  
• Pacific - макет, продукт, альбом, события, блог
  
• Tremont - макет, продукт, альбом, события, блог
  
• Йорк - макет, продукт, альбом, события, блог, проект

Экран блокировки

Вы можете добавить фоновое видео в свой экран блокировки вместо изображения или слайд-шоу. Все шаблоны поддерживают экраны блокировки.

Чтобы добавить видео на экран блокировки:

1. В главном меню нажмите Дизайн .
2. Нажмите Блокировка экрана .
3. Нажмите Медиа .
4. Нажмите вкладку Видео .
5. Вставить URL вашего видео в поле URL видео .

Шаг 3 - Добавить фильтр

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

Чтобы добавить фильтр:

Откройте раскрывающееся меню « Фильтр» на вкладке « Видео » и выберите один из следующих вариантов:

• пятно
• яркость
• контрастировать
• инвертировать
• помутнение
• насыщать
• Сепия

Для всех фильтров, кроме Invert , вы можете отрегулировать силу с помощью ползунка.

Примечание

. Эффекты фильтра могут отображаться по-разному в разных браузерах.

Шаг 4 - Измените скорость воспроизведения (только YouTube)

Если вы используете URL-адрес видео на YouTube, вы можете выбрать скорость воспроизведения, чтобы изменить скорость вашего видео. Скорость по умолчанию - 1x, что означает, что видео будет воспроизводиться с нормальной скоростью. Выберите из четырех разных скоростей:

• 0,5x (медленно)
• 1x (нормальный)
• 1,5x (быстрее)
• 2x (самый быстрый)

Шаг 5 - Добавление мобильного запасного изображения

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

Чтобы установить мобильное резервное изображение:

1. На панели «Медиа» перейдите на вкладку « Видео ».
2. Прокрутите вниз и перетащите изображение в загрузчик изображений. Вы также можете использовать изображение ,
3. Нажмите Сохранить .

: добавьте анимированный .gif в качестве резервного изображения для мобильного устройства, чтобы создать аналогичный эффект.

Если вы не добавите резервное изображение для мобильного устройства, вместо него на мобильном телефоне будет отображаться цвет фона. Вы можете выбрать этот цвет в этих шаблонные семьи :

• Адирондак - содержание фона настройки цвета
• Бедфорд - твик Color Banner Overlay
• Рассол - наложение цвета настройки
• Пять - наложение цвета баннера и настройка фона заголовка
• Montauk - холст фона настройки
• Pacific - настройка цвета наложения
• Tremont - настройка фона сайта
• Йорк - настройка цвета фона

В титульных страницах используйте настройки фона: цвета .

Шаг 6 - Добавьте цвет наложения (только обложки)

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

Чтобы изменить цвет наложения:

1. На панели титульной страницы или в главном меню нажмите « Стиль» .
2. Прокрутите вниз до видео фона .
3. Нажмите Пользовательский цвет наложения .
4. Выберите новый цвет с колеса.
5. Вы также можете выбрать режим наложения цветов в раскрывающемся меню, чтобы изменить внешний вид цвета.

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

Отключить фоновое видео

Чтобы отключить фоновое видео, переключитесь на фоновое изображение.

На вкладке « Медиа » нажмите « Изображение» , затем нажмите Сохранить. Заданное изображение заменит фоновое видео.

Если вы используете титульную страницу, вы также можете выбрать « Нет», чтобы заменить видео цветом фона.

Видео баннеры в индексе

Вы можете добавить видео-баннеры в указатель в этих шаблонные семьи :

• Bedford
• рассол
• Монтаук
• миролюбивый
• Йорк

Чтобы добавить видео, откройте Настройки подстраницы и нажмите Медиа , затем Видео . Затем следуйте шаги выше добавить URL видео.