МЕНЮ
Смотреть демо
0

Ваш заказ

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

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


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

Вставить видео на сайт очень просто. Всё, что нам понадобится - это несколько HTML строк.

Итак, мы разберем несколько способов вставки видео на сайт:

  1. Вставить с помощью HTML
  2. Вставить видео с Youtube
  3. Как вставить видео с Rutube. Vimeo и прочих сайтов
  4. Как вставить видео в шаблон Moguta

Как вставить видео средствами HTML


<video>

<source src = "/uploads/video.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<source src = "/uploads/video.ogg" type = 'video/ogg; codecs="theora, vorbis"'>

<source src="/uploads/video.webm" type='video/webm; codecs="vp8, vorbis"'>

</video>
 

Вставить видео с Youtube

Для того, чтобы вставить видео с сайта Youtube необходимо:

  1. Воспользоваться кнопкой "Поделиться", которая находится сразу под роликом;
  2. Выбрать вкладку "HTML-код";
  3. Скопировать сгенерированный код;
  4. Вставить скопированный код на сайт;
  5. Через атрибуты "width" и "height" настроить высоту и ширину блока видео, если это необходимо;

как вставить видео на сайт

Как вставить видео с Rutube. Vimeo и прочих сайтов

Алгоритм вставки видео с различных видеосервисов такой же, как с Youtube.

  1. Нажать кнопку "Поделиться" или "Share";
  2. Вставить сгенерированный код к себе на сайт;
  3. При необходимости стилизовать блок с видео;

Как стилизовать блок с видео

Во-первых, у тега video есть несколько атрибутов:

  1. autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.
  2. controls - Добавляет панель управления к видеоролику.
  3. height - Задает высоту области для воспроизведения видеоролика.
  4. loop - Повторяет воспроизведение видео с начала после его завершения.
  5. poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  6. preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
  7. src - Указывает путь к воспроизводимому видеоролику.
  8. width - Задает ширину области для воспроизведения видеоролика.

Во-вторых, код с видео можно обернуть в отдельный div и использовать CSS для стилизации

Как вставить видео в шаблон Moguta

Рассмотрим на примере вставки видео в форму обратной связи. Вставим первое видео на всю ширину контейнера, а второе отцентруем.
как вставить видео на сайт Moguta

  1. Через административную панель заходим Настройки - Шаблон;

  2. Выбираем файл страницы, на которой хотим вставить видео;

  3. Вставляем код в нужное место;

  4. Добавляем второе видео в div и добавляем ему ширину, равную ширине видео, а также автоматические внешние отступы;


как вставить видео на сайт Moguta

Теперь вы знаете как добавить видео на сайт из разных источников. Появились вопросы? - Пишите нам в группе, комментариях или тех поддержке. Мы будем рады помочь вам!

 

Комментарии (0)

Имя:
E-mail:


Получать уведомления о новых комментариях: