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

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

Давайте прямо сейчас!

Что такое видеовставка?

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

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

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

<iframe src="URL'></iframe>

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

Вы можете задаться вопросом: почему нельзя просто загрузить видео на свой сайт и покончить со всеми хлопотами? Google часто говорит, что видео увеличивает время загрузки сайта, снижает его скорость и, таким образом, влияет на пользовательский опыт и негативно сказывается на вашем SEO. Следовательно, вы можете потерять трафик, рейтинг и так далее. Не говоря уже о перегруженных серверах, дополнительных расходах и так далее.

Встраивание видео на сайт поможет вам преодолеть большинство этих проблем. Вот почему.

Встраивать не загружать: Ключевые преимущества встроенного видео

1. Встраивание видео на сайт для увеличения времени загрузки видео (и SEO)

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

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

Источник: Crisp Video

Так что, по сути, снижение времени загрузки означает снижение рейтинга, уменьшение трафика, снижение конверсии и... потерю дохода!

Но не думайте, что добавление видео принесет вам только проблемы. Если видео будет воспроизводиться на вашем сайте, это значительно повлияет на количество времени, которое люди проводят на вашем сайте (положительный фактор ранжирования), а также само видео может появиться на странице Google №1, что принесет трафик и все остальное, что за этим последует. Таким образом, все дело в том, чтобы сделать все правильно и выбрать вариант встраивания, а не загрузки.

2. Встраивание видео на веб-сайт для преодоления ограничений пропускной способности

Загрузка видео исчерпывает пропускную способность вашего собственного сервера (за что приходится платить). И каждый раз, когда кто-то ссылается на ваше видео или вставляет его на свой сайт, страдает ваш собственный сайт, поскольку он снова использует вашу пропускную способность. Это дорого и неэффективно.

3. Встраивание видео на веб-сайт, чтобы избежать ограничений на размер и хранение файлов

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

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

Источник: ProPhoto

4. Встраивание видео на веб-сайт для получения более высокого качества видео

От ограничений на размер файла мы переходим к ограничениям на качество видео, когда речь идет о загрузке видео на сайт. Если вы хотите отобразить на своем сайте видео высокого качества, хранящееся на стороннем сайте, вы останетесь в пределах "лимита инодов" - структуры данных, хранящей информацию о файле на вашем хостинге. Таким образом, вам не придется думать о конвертации видеофайлов в различные форматы и версии, чтобы посетители могли просматривать их в высоком или низком разрешении.

Выбор сайта для размещения видео

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

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

Отзывчивый плеер

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

Скорость и качество обслуживания

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

• Поддержка отличного качества видео: В 2020 году вы не сможете позволить себе зернистые кадры и анимацию в формате 360p или 480p. Поэтому, если вы не ограничены в бюджете и для ваших целей достаточно 1080p, убедитесь, что выбранный вами видеохостинг поддерживает Ultra HD и выше. Лучшие платформы предлагают автоматическое переключение между HD/SD-качеством.
• Отличная поддержка и обслуживание клиентов: Дважды проверьте качество серверов, которые использует сервис. Не падает ли сайт время от времени (это повлияет на отображение видео на вашем сайте!)? Не подвержен ли он DDoS-атакам? И, что еще важнее, каково среднее время ответа на запросы клиентов?

Параметры конфигурации игрока

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

Возможности настройки видеоплеера в видеохостингеWave.video

Функции генерации свинца

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

Конфиденциальность

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

SEO

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

Источник: Moz

Аналитика и сбор данных

Ваши видеоролики призваны привлекать и радовать клиентов, поэтому вы, естественно, хотите знать, насколько они довольны. Поэтому сервис, на котором вы размещаете видео, должен предоставлять вам множество аналитических данных. И это не просто простые вещи, такие как просмотры, комментарии, а совершенно другие сложные данные. Встраивая видео, вы можете добавить специальный код отслеживания - из Google Tag Manager - и получить дополнительную аналитику в своем аккаунте Google Analytics, например, среднее время просмотра, момент, когда люди обычно прекращают просмотр, и так далее. Все эти данные нужны вам, чтобы понять, как и почему ваши видео пользуются успехом (или не пользуются).

Стоимость

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

Как сгенерировать код для вставки

После того как вы выбрали платформу для видеохостинга и загрузили весь свой видеоконтент, остается только один шаг, который отделяет вас от добавления/вставки видео на ваш сайт - поиск кода для вставки.

Встраивание видео ссервисов видеохостинга

Встраивание из Wave.video

Чтобы вставить видео с Wave.video, перейдите в раздел "Мои проекты" и найдите видео, которое вы хотите вставить. Затем наведите курсор на значок с тремя точками и нажмите на "Проигрыватель".

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

Чтобы настроить видеоплеер, откройте вкладку "Внешний вид" и измените цвет плеера, определите, какие элементы управления будут отображаться (если они есть), или выберите пользовательскую миниатюру. Если вы хотите узнать больше о возможностях видеохостинга Wave.video, обязательно прочтите эту статью.

Существует несколько вариантов того, как вы можете встроить видео с помощью Wave.video на свой сайт или блог.

• Встроенная вставка

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

• Встраивание всплывающих окон

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

Существует три способа интегрировать видео в контент страницы: миниатюра, выделение и текстовая ссылка.

Встраивание с YouTube

Просто перейдите на страницу воспроизведения вашего видео на YouTube, нажмите на кнопку "Поделиться", а затем "Вставить". Вы можете просто скопировать код для вставки, а можете воспользоваться несколькими настраиваемыми опциями - отображением/скрытием элементов управления плеером или воспроизведением видео с определенного момента (не обязательно с начала).

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

Встраивание из Vimeo

Код для вставки на Vimeo можно найти, нажав на значок Share справа от видео. Вы увидите окно с различными рамками, одна из которых - ваш код для вставки.

Нажав на +Show Options, вы можете настроить отображение вашего видео с помощью этого кода вставки. Вы можете изменить цвет плеера, его размер (на всякий случай сохраните его отзывчивым), добавить вступление, а также добавить некоторые "специальные вещи", такие как зацикливание, автовоспроизведение и многое другое.

Перейдя на Pro, Business или Premium, вы получите дополнительные возможности, такие как настройка цветов и компонентов, добавление конечных экранов и логотипа.

Встраивание из Wistia

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

Wistia предлагает два типа кодов для встраивания: Inline embeds и Popover embeds. Встроенные коды подразумевают расположение видео в одном ряду с остальным контентом, в то время как встроенные коды Popover помогают видео выплыть над содержимым страницы.

Встраивание из Vidyard

Обратите внимание, что для встраивания видео из Vidyard в вашем тарифном плане должна быть включена функция Player Embeds. Vidyard поддерживает два варианта встраивания - отзывчивое встраивание и встраивание в iframe.

На приборной панели Vidyard перейдите в раздел Content>Player, наведите курсор на плеер и нажмите "поделиться". В разделе "Отзывчивое встраивание" просто нажмите на значок "Копировать код " и выберите опцию "Использовать лайтбокс", чтобы превратить код во встраивание в лайтбокс. Вы можете вручную ввести размеры плеера, чтобы получить максимальную ширину и высоту.

Если ваш сайт не поддерживает JavaScript, вы можете установить флажок Trouble embedding? и скопировать код встраивания iframe.

Встраивание видео изсоциальных сетей

Встраивание из Facebook

Каждое видео на Facebook поддерживает функцию встраивания. Все, что вам нужно сделать, - это нажать на кнопку "..." в правом верхнем углу сообщения на Facebook и нажать "Вставить".

При желании вы можете выбрать опцию "Включить полный текст сообщения" (просто нажмите на флажок), и тогда вместе с видео будет добавлен соответствующий текст из сообщения Facebook.

Встраивание из Instagram

Поскольку Instagram принадлежит Facebook, процесс встраивания очень похож. Откройте Instagram на рабочем столе (не в приложении) и нажмите на кнопку "..." в правом верхнем углу.

Нажмите на "Встроить" и скопируйте код для вставки. И снова у вас будет выбор, добавлять (или не добавлять) надпись к вставке.

Встраивание из Twitter

Чтобы вставить видео из Twitter, не используйте приложение. Откройте твит на рабочем столе и выберите пункт "Embed Tweet" в выпадающем меню, расположенном рядом с кнопкой "Follow" в твите. Затем выберите опцию "Embed Tweet".

Просто скопируйте/вставьте код для вставки - но учтите, что при вставке в Twitter будет отображаться весь твит с подписью, нет возможности отобразить одно видео.

Встраивание из TikTok

В TikTok кнопка "Получить код длявстраивания" появляется прямо на видео. Несмотря на то, что здесь нет выбора, поскольку все, что вы получите, - это ссылку на плеер 340×700 с автовоспроизведением, вы можете изменить некоторые настройки при добавлении кода вставки на свою веб-страницу.

Использование альтернативного метода: Генераторы кодов для встраивания видео

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

Есть и альтернативный способ - вы можете найти множество специальных сайтов, которые по своей сути являются просто генераторами кодов для встраивания видео. Такие платформы, как Embed.ly, Toolki и Siege Media , позволяют сгенерировать код для встраивания видео: все, что вам нужно сделать, - это иметь под рукой URL-адрес видео, и эти сайты автоматически создадут код для встраивания вашего видео.

Но этот обходной путь имеет несколько особенностей:

• Как правило, только что встроенное видео на вашем сайте будет иметь водяной знак платформы.
• Возможности настройки видео очень ограничены.
• Эти платформы не предлагают никакой аналитики или даже возможности добавить код отслеживания для дальнейшего отслеживания статистики вашего видео в Google Analytics или сторонних аналитических платформах.

Поэтому, если у вас есть возможность использовать платформу видеохостинга, всегда выбирайте этот вариант.

Часть V: Как вставить видео на свой сайт

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

Встраивание видео в HTML

ШАГ 1: ОТРЕДАКТИРУЙТЕ СВОЙ HTML

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

ШАГ 2: СКОПИРУЙТЕ И ВСТАВЬТЕ КОД ДЛЯ ВСТАВКИ

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

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

Встраивание видео в WordPress

Если ваш сайт работает на WordPress, есть два варианта вставки видео.

ВАРИАНТ #1: СКОПИРОВАТЬ/ВСТАВИТЬ URL

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

#ВАРИАНТ №2: ИСПОЛЬЗОВАТЬ КОД ДЛЯ ВСТРАИВАНИЯ

Иногда вы хотите внести некоторые изменения в отображение видео, или, возможно, вы размещаете видео на платформе, которая не поддерживается автоматической вставкой WordPress. Тогда вам придется использовать код вставки видео.

Перейдите в текстовый редактор WordPress (не путайте с визуальным редактором), и вы увидите HTML-версию вашей страницы. Затем просто выполните шаги, о которых мы говорили выше в разделе HTML этого руководства о том, как вставить видео на свой сайт.

Встраивание видео в Shopify

ШАГ 1: СКОПИРУЙТЕ КОД ДЛЯ ВСТРАИВАНИЯ

Первый шаг очень прост - просто скопируйте код вставки с сайта, на котором вы размещаете свое видео.

ШАГ 2: ВОЙДИТЕ В ПАНЕЛЬ АДМИНИСТРАТОРА SHOPIFY

Войдите в панель управления Shopify. Все ваши текущие страницы должны быть перечислены в разделе Интернет-магазин -> Страницы. Перейдите на страницу, которую вы хотите отредактировать, и обратите внимание на символы на панели инструментов редактора.

Шаг 3: Нажмите кнопку "ВСТАВИТЬ ВИДЕО"

Выберите текстовый редактор и на панели инструментов нажмите на значок видеокамеры. Появится новое окно - просто вставьте код вставки видео и выберите опцию "Вставить видео". Вот и все!

Встраивание видео в Squarespace

Что касается встраивания, то здесь Squarespace очень похож на WordPress. Вы можете использовать код для вставки или вставлять видео, копируя/вставляя его URL (это возможно только при вставке с YouTube, Vimeo, Animoto или Wistia).

Поскольку Squarespace - это конструктор сайтов, просто добавьте любой блок, поддерживающий видео, и просто скопируйте/вставьте URL-адрес вашего видео или нажмите на иконку вставки (выделена красным кружком), после чего появится всплывающее окно, в котором вы сможете скопировать/вставить код вставки.

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

Встраивание видео в Wix

Wix работает по тем же принципам, что и предыдущие платформы для хостинга сайтов. Только опция копирования/вставки URL для вставки видео поддерживает ролики, размещенные на YouTube, Vimeo, DailyMotion и Facebook.

ВАРИАНТ #1: СКОПИРОВАТЬ/ВСТАВИТЬ URL

Шаг 1: Откройте редактор

Нажмите на значок "+" в левой части редактора и выберите пункт "Видео". В разделе "Одиночный видеоплеер" выберите платформу, на которой размещено ваше видео - YouTube, Vimeo, DailyMotion или Facebook.

Шаг 2: Скопируйте URL-адрес вашего видео

Нажмите на "Изменить видео" и скопируйте URL-адрес видео, которое вы хотите показать. На этом шаге вы можете настроить параметры воспроизведения и управления.

Шаг 3: Настройте положение видео

Используйте перетаскивание, чтобы изменить положение и размер видео. И просто сохраните страницу!

#ВАРИАНТ №2: ИСПОЛЬЗОВАТЬ КОД ДЛЯ ВСТРАИВАНИЯ

Если вы не размещаете свои видео на платформах, поддерживаемых Wix, вам нужно скопировать код вставки видео. Затем, вместо того чтобы выбрать "Добавить видео", вам нужно будет нажать "Еще". Здесь вы найдете HTML iframe, куда можно вставить код для вставки. Нажмите "Сохранить", и все готово.

Заключительные слова

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

Пожалуйста, сообщите нам в комментариях, есть ли что-то, что вы хотели бы добавить в это руководство. Какие вопросы остались без ответа? Какие платформы видеохостинга или услуги хостинга сайтов вы хотели бы, чтобы мы дополнили это руководство? С какими трудностямивы сталкиваетесь при встраивании видео на свой сайт и обеспечении максимального удобства для пользователей?