Как вставить видео на сайт? Подробно!

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

  1. Размещать свои файлы на видео хостингах и отображать их на сайте.
  2. Загружать видео на свой хостинг и отображать их на сайте с помощью плеера.

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

Как загрузить видео на Youtube:

  1. Первым делом Вам необходимо войти в свой аккаунт YouTube.
  2. Нажмите кнопку Добавить видео в верхней части страницы.
  3. Выберите ролик для загрузки. (Учитывайте, что видео не должно нарушать авторские права. Если Вы хотите наложить на видео известную музыку, то придется ее купить).
  4. Пока файл загружается заполните основную информацию о ролике и при необходимости дополнительные параметры.
  5. Чтобы добавить видео на YouTube, нажмите Опубликовать.
  6. Пока вы не нажмете кнопку Опубликовать, видео доступно только вам.

С более подробной инструкцией по загрузке видео на Youtube можете ознакомиться на странице supporta

Вставить на сайт видео с Youtube:

Чтобы вставить уже загруженное (имеющееся) на Youtube видео:youtube

  1. Откройте интересующее Вас видео на Youtube;
  2. Нажмите на находящуюся под видео кнопку «Поделиться»;
  3. Выберите вкладку «HTML» и скопируйте появившийся код; (Чтобы скопировать код быстрее: нажмите правой кнопкой мыши по видео и выберите пункт «Копировать HTML-код.)
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Vimeo:Vimeo

  1. Откройте понравившееся на Vimeo Вам видео;
  2. Нажмите на находящуюся под видео кнопку «Share»;
  3. В появившимся окошке в пункте «Embed» скопируйте код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Rutube:Rutube

  1. Откройте нужное на RuTube Вам видео;
  2. Нажмите на находящуюся под видео кнопку «поделиться»;
  3. Выберите вкладку «Код вставки»
  4. Скопируйте появившийся код;
  5. Вставьте скопированный код в нужную часть сайта.
  6. Сохраните изменения и обновите страницу.

Вставить на сайт видео с VK (Вконтакте):videovk

 

  1. Откройте видео; (Возможно понадобится авторизация).
  2. Нажмите на находящуюся под видео кнопку «Еще»;
  3. Выберите вкладку «Экспортировать»  в появившемся окне «Код для вставки» скопируйте появившийся код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

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

Теперь рассмотрим варианты воспроизведения видео с загруженным видео на свой сервер.

Вставить видео на сайт с помощью HTML5

Для этого способа Вам понадобится тег video

  1. Загружаем на сервер видео;
  2. Копируем вышеуказанный код;
  3. Вставляем в нужную нам часть сайта скопированный код;
  4. Изменяем URL на путь к файлу который мы разместили на хостинге
  5. Сохраняем изменения и обновляем страницу.

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

В первую очередь хотелось бы сказать о таких атрибутах как height (высота), width  (ширина).

С их помощью вы можете настроить высоту и ширину области для воспроизведения видеоролика.

  • src — это самый важный атрибут, он указывает путь к видеоролику.
  • autoplay — воспроизведение видео сразу после загрузки страницы.
  • loop — повтор воспроизведения видео по завершению
  • poster  — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  • preload — загрузка видео вместе с загрузкой веб-страницы.

Вставить видео на сайт с помощью плеера

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

  1. Скачайте плеер, а затем его разархивируйте;
  2. Создайте папку и поместите в нее файлы из архива;
  3. Подключите javascript-файл плеера к html-файлу. Для этого внутри тега head, пропишите следующий код:

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

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

Как вставить код видео в html

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

Традиционно вид большинства html страниц выглядит примерно следующим образом:

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

Но так выглядит самая элементарная страница, на практике же тело сайта состоит из множества различных частей (блоков).

Например один из них div.

Мы можем разместить код нашего видео в блок и задать этому блоку нужные параметры … например выравнять по центру.

Теме оформления блоков можно посвятить не одну статью. Но сейчас не об этом.

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

После сохраните изменения и обновите страницу для проверки.

Как вставить видео в статью WordPress

Чтобы разместить видео в статье или в странице wordpress достаточно перейти в режим «текст» и вставить код в нужную вам часть (здесь же вы можете изменять значения атрибутом, таких height, width) после перехода в режим «визуально» будет отображаться плеер.

wordpress

На этом я заканчиваю статью надеюсь она была полезной для Вас.