Инструкция по вставке youtube видеоролика на html сайт

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

Очень часто в дополнение к основному сайту создается канал на YouTube — это не только отличное средство монетизации, но и источник потенциальных клиентов.

Внимание !

В самом конце мы рассмотрим: ↓↓↓

  1. Как добавить видео на WordPress сайт
  2. На Joomla Сайт  good

 

 

Лучшие методы

 

Даже если вы не владеете навыками работы с HTML и CSS, то в этом материале вы найдёте очень простые инструкции, как вставить видео на сайт всего в несколько кликов.

Но, в первую очередь, давайте разберёмся, зачем вставлять ролики из YouTube на страницу:↓↓↓

  • Улучшает восприятие информации;
  • Дополняет содержимое страницы;
  • Повышаются поведенческие факторы.

 

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

 

 

Простой способ добавления ролика

 

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

1) Для этого вы должны перейти на страницу с видео и под ним найти вкладку «Поделиться«, где выбрать раздел «HTML код»

 

Здесь вы получите код, который и нужно вставить в любой раздел сайта между тегами <body>… </body>.  smile

 

→ Это можно выполнить — через панель управления хостинга или непосредственно на компьютере отредактировать файл html и залить его на сервер !!!

Аналогичная процедура применяется на сайтах с любыми CMS — можно встраивать видео через визуальный редактор.

Результат будет такой ↓

Общий вид кода выглядит так: 

<iframe width=»430″ height=»275″ src=»https://www.youtube.com/_fdgM» frameborder=»5″ allowfullscreen> </iframe>

P.S — Iframe — это тег, создающий контейнер на сайте, который импортирует содержимое сторонних страниц.

 

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

  • width — определяет длину плеера в пикселях;
  • height — устанавливает высоту;
  • src — ссылка на импортируемый контент;
  • frameboder — для установки границ;
  • allowfullscreen — разрешение для полноэкранного режима.

 

 

Размещаем ролик при помощи тега <video>

 

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

 

Давайте рассмотрим общий вид кода для добавления на сайт: 

<video width=»540″ height=»320″ controls=»controls» poster=»foto.png»> <source src=»besty.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘> </video>

Обратите внимание, что любые атрибуты вы можете настроить самостоятельно: 

  • loop — функция, которая активирует повторение воспроизведения по окончании ролика;
  • controls — появляются органы управления;
  • src — путь к видео;
  • poster — изображение, которое отображается во время загрузки;
  • width и height — для выбора размеров;
  • autoplay — атрибут активирует запуск видео сразу после загрузки браузера.

 

 

На WordPress

 

Одним из самых простых методов добавления видео используется в WordPress.

  1. Для этого вам нужно зайти в админку
  2. Нажать «Добавить запись»
  3. и непосредственно в форме добавления нажать «Вставить».

 

Вот и все  good

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

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

Среди наиболее популярных можно выделить JW Player, Video.js, Spider Video Player.

 

На Joomla

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

Самый простой метод — это вставить код видео напрямую из Ютуба. smile

Также есть ещё один практичный способ – AllVideos, Vidbox, AllVideos Reloaded.

Устанавливаются эти утилиты очень быстро и значительно упростят процесс, как вставить видео с Ютуба на Joomla

 

Я очень советую 

Таким образом, в этой статье мы очень кратко изложили практически все способы добавления видео на любой сайт. good

Подпишитесь на новые статьи от 7Youtube.ruplashka

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017, 7youtube.ru
Копирование материала строго запрещено.

backtotop