Как вставить видео с youtube на страницу сайта. Как видео с ютуба добавить на сайт


Как же вставить видео с youtube на сайт joomla – шаблон и плагин

Видеоролики помогают оживить веб-страницу и предоставить читателям больше информации.

Давайте выясним, как вставить видео с Youtube на сайт Joomla пятью основными методами:

  1. Используя плагин AllVideos
  2. С помощью средств HTML5
  3. С помощью модуля Vidbox
  4. С помощью плагина Youtube Playlist Wall
  5. Используя компонент Youtube Gallery

 

 

1. Плагин AllVideos

 

→ Удобный и функциональный плагин для вставки видео с Youtube на Joomla – AllVideos.

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

Для начала его нужно скачать и установить. Свежие релизы берите с официального сайта www.joomlaworks.net. После установки нужно выполнить настройку плагина.

 

Чтобы настроить плагин AllVideos, выполните следующие действия:

  1. В панели управления сайтом войдите в меню Расширения-Менеджер плагинов.
  2. Найдите в списке AllVideos и кликните по нему, чтобы войти.
  3. Измените состояние плагина на Включено, нажав соответствующую кнопку.

 

→ Теперь можно приступить к настройке параметров видео.

Что здесь можно задать ???  ↓

  • Select template – выбор шаблона для внешнего вида плеера
  • Local Video Folder – в этой строке задайте папку для хранения видеофайлов
  • Default width (in px) for videos и Default height (in px) for videos – соответственно ширина и высота видеоплеера в пикселях
  • Задайте прозрачность и цвет фона плеера (video player transparency и background color)
  • Display JW Player controls – параметр позволяет задать вывод кнопок управления на JW Player

 

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

Когда плагин настроен и включен, вы можете вставить видеоролики с помощью шаблона Joomla для вставки видео с Youtube.

 

Он выглядит так: ↓

{youtube} {/youtube}

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

 

Теперь вы знаете, как с помощью AllVideos добавить на Joomla видео с Youtube.

 

 

2. Средства HTML5 для вставки видео

 

→ В HTML5 видео на веб-страницы добавляется с помощью всего одного тэга. При этом за воспроизведение отвечает браузер. Никаких дополнительных программ и плагинов устанавливать не требуется.

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

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

• Чтобы избежать этого, используйте форматы видео, которые поддерживают большинством браузеров. Для видеофайлов это формат OGG, который поддерживают браузеры Opera, Chrome, Mozilla.

 

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

Для этого в нужное место на странице добавьте код: ↓↓↓

  • <video src=»ролик.ogg«></video>

 

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

Тэг VIDEO имеет несколько параметров:

  • Autoplay – это параметр без значения задает автоматическое воспроизведение, если он присутствует в тэге.
  • Controls – атрибут без значения. Если он присутствует в тэге, браузер выведет элементы управления воспроизведением в окне плеера.
  • Loop – еще один атрибут без значения. Ставит воспроизведение видео на повтор (зацикливает).
  • Poster – параметр, который задает путь к файлу постера, который будет выводиться в окне плеера. Если он не задан, для этого будет использован первый кадр ролика.
  • Height и width – параметры, задающие соответственно высоту и ширину плеера в пикселях.

Учитывая параметры, полный тэг VIDEO может выглядеть так:

  • <video src=»ролик.ogg» autoplay controls height=”200” width=”200”></video>

 

В данном случае мы задаем воспроизведение файла ролик.ogg в плеере размерами 200х200 пикселей с элементами управления и автовоспроизведением.

 

 

→ Кроме того, вставить видео с Youtube на сайт Joomla с помощью HTML можно еще одним способом !!!  ↓

 

1. Под каждым роликом есть кнопка «Поделиться».

2. Нажмите ее и перейдите на вкладку «HTML-код».

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

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

Вот, как можно вставить видео с Youtube на Joomla 3 с помощью HTML5.

 

 

3. Модуль Vidbox: эффектное воспроизведение видео

Это модуль для вставки файлов медиа с Youtube на сайты Joomla 3. Отличительная особенность Vidbox в том, что он позволяет открывать ролики во всплывающем окне.

Скачайте Vidbox из каталога Joomla, установите его и перейдите к настройке с помощью Менеджера модулей.

• Слева — задайте нужные параметры для модуля. Выберите для него нужное место в шаблоне и опубликуйте.

• Справа — в окне настроек в разделе Basic Settings нужно задать URL и тип файла, который вы хотите вставить. Также задайте размеры окна плеера и его миниатюры. Сохраните настройки.

В выбранном месте на странице вашего сайта Joomla 3 появится миниатюра плеера. При клике по ней видео c Youtube будет эффектно отображаться во всплывающем окне.

 

 

4. Youtube Playlist Wall

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

Скачать Youtube Playlist Wall можно в каталоге расширений Joomla. ↓

• С его помощью можно задать количество роликов в плейлисте, цветовое оформление и количество строк и столбцов.

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

 

 

5. Создание видеогалерей с помощью Youtube Gallery

Компонент Youtube Gallery помогает создавать галереи видео на HTML-сайтах. Он доступен для скачивания и установки в каталоге расширений для Joomla.

Он имеет богатый набор возможностей: ↓

  • Стандартные темы для оформления роликов
  • Поддержка проигрывателя Adobe Flash
  • Адаптация под мобильные устройства
  • Настройка импорта и обновления роликов с Ютуба и др.

 

Если вы хотите создавать видеогалереи на сайте Joomla 3, скачайте удобное средство Youtube Gallery!

 

P.S — могу порекомендовать также вот эту видео — инструкцию ⇓

 

Вывод

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

Успехов!  smile

 

 

7youtube.ru

Встраивание видео с youtube на сайт okis

Наиболее удобным способом вставки видео роликов YouTube на страницы сайтов созданных в конструкторе okis, является использование соответствующей функции визуального редактора. Которую в панели управления визуального редактора, вы можете узнать по характерной иконке камеры:

Функция предлагает два варианта встраивания видео. Как ссылку, или же как html код.

C этим думаю все понятно, и теперь поговорим о том, как же собственно получить ссылку или html код для встраивания видео. Для получения ссылки вам следует перейти на страницу видео yuotube, которое вы хотите разместить на сайте.

Получить ссылку на видео вы можете из нескольких источников:

1. Просто скопировав ссылку из адресной строки браузера

2. Кликнув правой кнопкой мыши на видео, выбрать пункт "Копировать URL видео" или если это необходимо "Копировать URL видео с привязкой ко времени"

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

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

1. Кликнув правой кнопкой мыши на видео, выбрать пункт "Копировать HTML код"

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

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

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

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

pro-okis.ru

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

В своих новостях мы, журналисты, часто используем видеоподтверждение сказанного, ну или просто выкладываем понравившийся ролик. Лично у меня раньше проблем не было, но около 3 месяцев стало происходить следующее: вместо видео появляется пустое место, которое как бы отведено под видео, которого нет. Мне стало интересно, и я разобрался, в чём же проблема. А недавно я заметил то же самое и у других журналистов с 4apple.org. Я решил помочь, и покажу, как правильно и быстро добавить видео с YouTube, не используя функцию flash (это долго, и многие смартфоны не могут её прочитать).

Итак, всё просто. Выберу случайный ролик, его адрес на YouTube: http://www.youtube.com/watch?feature=player_embedded&v=B5AKaMMd_gY. Теперь из адреса нужно удалить некоторую часть, что бы адрес имел следующий формат: http://www.youtube.com/watch?v=B5AKaMMd_gY. Запоминайте, должно быть: watch?v=(набор разных букв). Потом нажимаете на кнопку Tube в админпанели создания новостей, и вместо http:// вставляете полученный адрес.

Для наглядности, вот 2 примера:

В этом видео ссылка с YouTube вставлена полностью (оно должно не работать):

В этом видео адрес тот, который подчёркнут (оно должно работать):

Удачи!

P.S. Это нужно делать в том случае, если вы переходите на YouTube с другого сайта, на котором видео!!!

Оцените статью: Поделитесь с друзьями!

4apple.org