Как вставить видео на сайт и социальные сети

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

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

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

Часть I: Что такое встраивание видео?

Главный элемент – это код встраивания. Код вставки видео в html – это фрагмент HTML-кода, который используют для добавления клипов и других типов контента на сайт.

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

При встраивании ролика на сайт сам файл остаётся на прежнем месте, а при загрузке перемещается на ваш сервер.

Хотя десятки хостингов предлагают автоматическую генерацию встраивания, следует понимать структуру кода.

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

Часть II: Преимущества встраивания перед загрузкой

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

1. Увеличение времени просмотра сайта

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

По словам Джона Мюллера из Google, скорость загрузки влияет на ранжирование.

Посмотрите график, который показывает, как время загрузки веб – страниц влияет на конверсии:

Увеличение загрузки означает снижение трафика и доходов!

Но есть и плюсы:

• Воспроизведение медиа файлов увеличивает время, которое люди проводят на сайте.
• Ролик может появиться на первой странице в Google и начать генерировать трафик.

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

2. Встраивание не грузит сервер

Загрузка роликов на сервер снижает пропускную способность вашего собственного сервера. И каждый раз, когда кто-то ссылается на ваш клип или вставляет его на свою страницу, ваш собственный сайт страдает.

Поскольку загрузка создаёт дополнительную нагрузку на пропускную способность сервера. Это дорого и неэффективно.

3. Не ограниченный размер файла

Хостинги ограничивают клиентов на объем загружаемых файлов. Каждый раз, когда вы загружаете медиа файл, вы занимаете место на своем сервере.

Загружая десяток файлов, вы можете занять слишком много места. Если 5 – 6 пользователей просматривают ролик одновременно, время загрузки упадёт.

Встраивание видео не ограничивает размеры файлов.

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

Поэтому загрузка требует сжимать ролики.

4. Качество воспроизведения

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

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

Часть III: выбор видеохостинга

Решив вставить видео на сайт, вы перекладываете все заботы о загрузке сервера и изменении формата файлов хостингу. Чтобы встроить клип на свой сайт, нужно добавить его на сторонний хостинг. И здесь у вас есть большой выбор.

Адаптивный плеер

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

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

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

Когда выбираете хостинг, проверьте два пункта качества обслуживания:

1. Поддержка качества показа. Сегодня вы не можете показывать зернистые кадры и анимацию в разрешении 360p или 480p. Современное разрешение составляет 1080p минимум. Убедитесь, что хостинг поддерживает Ultra HD или больше. Лучшие хостеры предлагают автоматическое переключение между качеством HD / SD.
2. Качество серверов, которые использует сервис. Происходят ли сбои ответов сервера. Подвержен ли хостинг DDoS-атакам и среднее время отклика на запросы их клиентов.

Конфигурации проигрывателя

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

Особенности лидогенерации

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

Поддержка лидогенерации подразумевает призывы к действию и способы сбора информации о посетителях (лидах).

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

При работе в интернете защищайте свою информацию. То же самое относится и к конфиденциальности видео.

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

СЕО

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

Размещение ваших файлов на внешнем сайте – хостере обеспечит вас обратными ссылками. Что увеличит доверие поисковых систем для вашего домена. Это повлияет и на рейтинг в поиске.

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

Если цель роликов в привлечении клиентов, то хостер должен дать доступ к аналитике:

• Статистика просмотров и комментариев.
• Опция для отслеживания Google Tag Manager, чтобы получать дополнительные сведения в Google Analytics.

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

Тарифы хостинга

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

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

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

Часть IV: как генерировать код встраивания

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

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

Рассмотрим как вставить видео в html на сайт с разных хостингов.

YouTube

Чтобы вставить видео на сайт с ютуба, перейдите на страницу воспроизведения ролика на YouTube, нажмите на кнопку “Поделиться“, а затем “Встроить”.

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

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

Vimeo

Код вставки видео в htm Vimeo можно найти, нажав на значок Поделиться в правой части ролика. Вы увидите окно с рамками, и одна из них – это код встраивания.

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

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

Wave.video

Чтобы встроить ролик из Wave.video, перейдите в раздел Мои видео и найдите клип, который нужно встроить. Нажмите на кнопку “Настроить “и откройте вкладку” Встраивание”.

Включите тумблер с надписью “Emdeded”. Система автоматически сгенерирует код встраивания. Под переключателем расположены настройки размера клипа.

Чтобы настроить плеер, откройте вкладку “Preview” и поменяйте цвет проигрывателя. Выберете элементы управления или пользовательский шаблон.

Wistia

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

Хостинг Wistia предлагает два типа интеграции:

1. Встроенные коды для размещения клипа внутри текста.
2. Вставки Popover делают ролики всплывающими над текстом страницы.

Vidyard

Хостинг Vidyard поддерживает два варианта встраивания:

• Адаптивное встраивание.
• Встраивание iframe.

На панели инструментов Vidyard щелкните раздел «Содержимое»> «Плеер», наведите курсор на плеер и нажмите «Поделиться».

Под опцией Responsive Embed просто щелкните значок Copy Code и выберите опцию Use Lightbox, чтобы превратить код во встраивание lightbox. Вы можете вручную ввести размеры плеера, чтобы изменить ширину и высоту.

Если ваш сайт не поддерживает JavaScript, выбирайте опцию “Проблемы со встраиванием” и копируйте код вставки в буфер iframe.

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

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

Facebook с Instagram

Каждый медийный файл на Facebook поддерживается функцией встраивания. Выберите опцию “…” в правом верхнем углу поста Facebook и нажмите “Embed.”

Выбирайте опцию “включить полный пост” (нажмите на флажок), и система добавит текст из поста Facebook вместе с роликом.

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

Нажмите на кнопку “Вставить”, и скопируйте код. Система предложит выбор: добавлять или нет заголовок.

Twitter

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

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

Tik Tok

В Tik Tok кнопка “Получить код вставки” появляется на клипе. В Тик Ток нет выбора: вы получите ссылку на плеер 340×700 с автозапуском.

Настроить опции можно при добавлении кода вставки на свою веб – страницу.

Генераторы кода

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

Альтернативный метод – десятки генераторов html кода. Сайты Embed.ly, Toolki и Siege Media генерируют код встраивания.

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

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

• Изображение будет промаркировано водяным знаком.
• Настройка воспроизведения в генераторах усечённая.
• Эти платформы не дают аналитику или статистику в Google Analytics.

Для аналитики добавляйте ролики на хостинги.

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

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

Встраивание видео в HTML-код страницы

ШАГ 1: Редактирование HTML – кода

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

ШАГ 2: Копирование кода вставки

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

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

Встраивание в сайты на WordPress

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

# 1 Вставка через URL – адрес

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

# 2 Код вставки

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

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

Затем просто следуйте инструкциям, которые мы упомянули выше, как вставить видео в html на сайт.

Добавление в интернет магазин Shopify

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

Блоги на Squarespace

Когда нужно вставить видео на сайт в Squarespace действия похожи на WordPress. Вы можете выбрать между добавлением кода или вставлять URL-адреса файлов. Это возможно только при встраивании с YouTube, Vimeo, Animoto или Wistia.

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

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

Сайты на Wix

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

# 1 Вставка URL – адреса

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

Нажмите на значок ” + ” в левой части редактора и выберите клип. В разделе Single Video Player выберите платформу, с которой добавляете видео — YouTube, Vimeo, DailyMotion или Facebook.

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

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

Шаг 3: отрегулируйте положение ролика.

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

# 2 Видео в HTML

Если вы не размещаете ролики на хостингах, поддерживаемых Wix, скопируйте html код:

• Нажмите кнопку “Еще”.
• Откроется HTML-iframe, куда можно вставить код встраивания.
• Нажмите кнопку “Сохранить”.

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

Напишите в комментариях, какую тему добавить к этому руководству. Какие вопросы остались без ответа?