Добавить
Вход
Главная
Цены
Документация
Обратная связь

Видео - помощь Webflow

Last updated on 10/22/2025@mrbirddev
Видео - помощь Webflow
Используйте видеоэлемент для встраивания видео, размещенных на сторонних сайтах, таких как YouTube или Vimeo.

Видеоэлемент позволяет встраивать видео, размещенные на сторонних сайтах, таких как YouTube или Vimeo, в любом месте вашего сайта.

Как добавить видео

Есть два способа добавить видеоэлемент на ваш сайт:

  • Откройте панель добавления и перетащите элемент видео на ваш холст Webflow
  • Нажмите Command + E (на Mac) или Control + E (на Windows), чтобы открыть быстрый поиск и найдите элемент видео

Как настроить параметры видео

После размещения видеоэлемента на холсте у вас будет доступ к настройкам видео, где вы можете добавить URL и заголовок. Чтобы быстро получить доступ к настройкам видео:

  • Дважды щелкните элемент видео
  • Выберите элемент видео и перейдите в панель настроек элемента (D)

Вставьте ваш URL видео, добавьте заголовок, если хотите, и нажмите Enter / Return. Миниатюра вашего видео появится в видеоэлементе.

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

  • YouTube (если вы хотите больше контроля над вашим видео на YouTube, попробуйте использовать элемент видео YouTube)
  • Vimeo
  • DailyMotion
  • KickStarter (все, что вам нужно сделать, это вставить основной URL кампании, и Webflow захватит основное видео кампании)
  • TED (поддержка нескольких языков)
  • Wistia
  • Ustream
  • Livestream
  • Twitch
  • Tudou
  • Hulu
  • SproutVideo
  • Vidzflow
В настоящее время мы не поддерживаем загрузку видеофайлов в панель ресурсов и их использование в видеоэлементе. Однако вы можете загружать видео как беззвучные фоновые видео.

Как установить размеры видео

Элемент видео учитывает размеры родительского контейнера (например, если вы поместите его в блок div, он займет всю ширину этого блока div). Если вы хотите задать видео пользовательскую ширину и высоту, вы можете создать пользовательский блок div. Для этого перетащите блок div из панели добавления и задайте блоку div значение ширины и значение высоты. Теперь, если вы перетащите ваше видео в этот пользовательский блок div, оно будет соответствовать этому размеру.

Другие способы добавления видео на ваш сайт

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

  • Видео YouTube
  • Фоновое видео
  • Лайтбокс
  • Богатый текст
  • Встраивание пользовательского кода

Элемент видео YouTube

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

Элемент фонового видео

Элемент фонового видео позволяет добавлять движущиеся фоны без звука. В отличие от элемента видео, который поддерживает только ссылки YouTube и Vimeo, элемент фонового видео может принимать любой видеофайл, который вы загружаете. Элементы фонового видео также имеют встроенный переключатель воспроизведения/паузы, чтобы посетители сайта могли воспроизводить или приостанавливать фоновое видео по своему желанию. Узнайте больше об элементе фонового видео.

Элемент lightbox позволяет посетителям сайта открывать видео в модальном окне. Подобно видеоэлементу, lightbox поддерживает ссылки на YouTube и Vimeo. Узнать больше об элементе lightbox.

Элемент и поле форматированного текста

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

Как встроить видео с помощью пользовательского кода

Вы также можете добавить HTML видео, используя элемент вставки:

  1. Перейдите в Панель добавления
  2. Перетащите элемент вставки на холст
  3. Вставьте ваш видеокод (Узнать больше о видеоэлементах в HTML)
  4. Нажмите Сохранить и закрыть

Вернуться к помощи webflow

Last updated on 10/22/2025@mrbirddev
Recent Articles
Loading...