Как вставить код с Ютуба

Вставить видео в 3 или Joomla 4 с популярных видеохостингов, таких как YouTube и Vimeo, можно посредством пользовательского HTML-кода, плагина AllVideos и других сторонних расширений. Подробно рассмотрим все способы вставки и определим самый предпочтительный.

Способы вставки видео в Joomla

• плагина AllVideos;
• шорткодов ShortCode Ultimate или других ультимативных расширений;
• пользовательского HTML-кода.

Давайте проанализируем каждый в соответствующем порядке.

Плагин AllVideos

AllVideos — плагин для Joomla, призванный упростить вставку видео в контент страниц.

Данное расширение пользуется огромной популярностью в первую очередь благодаря тому, что является полностью бесплатным: на момент написания данного материала общая оценка AllVideos на JED составляет 4.5 из 5 на основании 278 (!) голосов. Но не спешите устанавливать расширение: сперва давайте разберёмся, так ли всё гладко.

Принцип работы AllVideos прост: устанавливаем и активируем плагин, после чего можем вставлять видеоролики в Joomla из YouTube и прочих сервисов с помощью шорткодов. И тут у неосведомленного пользователя может возникнуть вопрос: а каких шорткодов? Действительно, этот момент не столь очевиден, и расширение не предусматривает никаких кнопок в редакторе для упрощения добавления видео. На самом деле это совсем не проблема, и стоит лишь понять синтаксис (короткая инструкция тут) и вставлять с помощью AllVideos больше не составит труда.

Как сделать тайм код На Youtube? Как ставить тайм код?

Пример шорткода вставки видео с YouTube:

tj_V7BDHTxk

На выходе данный шорткод преобразуется в:

Этот HTML-код и выводит на экран нужное нам видео.

Казалось бы: что может быть проще? Вставил часть URL-адреса в небольшой шорткод, а дальше — дело техники. Но не спешите радоваться! Если взглянуть за «занавес» веб-страницы, то можно увидеть целых 5 ресурсных файлов, которые добавляет к странице AllVideos.

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

Но это еще не самое страшное!

Полезно знать!

Опытным путём было установлено, что AllVideos конфликтует с плагином JCH Optimize (незаменим для оптимизации скорости загрузки сайтов на Joomla), мешая последнему правильно объединять JS-файлы, тем самым делая его вредным для сайта: файлы дублируются и размер страницы увеличивается вместе с временем её загрузки.

Итак, стоит ли устанавливать и использовать плагин AllVideos весом 1.4 Мб для вставки видео на сайт Joomla с учетом всего вышесказанного? Наш ответ: Нет!

Шорткоды для вставки видео

Существует достаточно большое количество ультимативных наборов шорткодов для вставки самых разных элементов в контент страниц Joomla, и практически каждый из них имеет в своём арсенале короткий код для вставки видео. Самым достойным представителем в линейке подобных расширений является Shortcode Ultimate.

Вставлять шорткоды Shortcode Ultimate — одно удовольствие. Чтобы добавить видео с YouTube:

1. нажимаем кнопку Вставить шорткод в текстовом редакторе;
2. из списка элементов во всплывающем окне находим и выбираем YouTube видео;
3. вставляем ссылку на видео и при необходимости настраиваем другие параметры;
4. можно просмотреть результат в текущем окне, нажав Предварительный просмотр;
5. жмем Вставить шорткод.

Короткий код будет выглядеть так:

[youtube url=»https://www.youtube.com/watch?v=tj_V7BDHTxk»]

Как и в случае с AllVideos, данный код на выходе преобразуется в HTML , отображающий указанное видео. Если мы опять посмотрим в код страницы, то снова увидим несколько ресурсных файлов, добавляемых плагином, которые также не лучшим образом сказываются на скорости загрузки. Тем не менее, применение Shortcode Ultimate для вставки видео в Joomla 3 является более предпочтительным относительно AllVideos по следующим причинам:

• ультимативный набор шорткодов;
• кнопка редактора для вставки шорткодов;
• наглядная настройка параметров видео;
• никаких проблем с JCH Optimize.

Только одно «но»: Shortcode Ultimate является платным расширением. Не подходит? Читаем далее.

HTML-код для вставки видео

Универсальный способ вставки видео не только в Joomla, но и на любой сайт, является пользовательский HTML-код. И здесь не надо ничего придумывать:

1. заходим на страницу видео с YouTube;
2. кликаем по видео правой кнопкой мыши;
3. из контекстного меню выбираем Копировать HTML-код;
4. в редакторе TinyMCE жмем кнопку Выключить редактор (правый нижний угол) для перехода в режим вставки HTML (без форматирования);
5. вставляем скопированный код и сохраняем;
6. проверяем и видим, что видео на странице не появляется;
7. возвращаемся в редактор и видим, что вставленного кода в нём нет.

Да, вставленный код был удалён после сохранения. Проблема в следующем:

Полезно знать!

Редактор TinyMCE по умолчанию удаляет из кода страниц тег , который находится в списке запрещенных тегов.

Чтобы это исправить:

1. переходим в менеджер плагинов Расширения → Плагины;
2. находим плагин Редактор — TinyMCE и переходим в его настройки;
3. выбираем вкладку с набором для нужной группы пользователей (если вы являетесь , то это будет Набор 0);
4. находим опцию Запрещенные теги и удаляем оттуда ;
5. сохраняем.

После этого возвращаемся к редактору Joomla, перезагружаем страницу с ним, жмем Выключить редактор и вновь вставляем скопированный с YouTube код, который выглядит приблизительно так:

На этот раз страница отобразит нужно нам видео, но в соответствии с параметрами, которые содержатся в скопированном коде: атрибуты тега width и height содержат значения ширины и высоты окна проигрывателя в соответствии с его размерами на странице, с которой был скопирован код.

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

Чтобы каждое вставленное ручным способом видео отображалось таким образом, скопированный тег нужно вставить в тег со встроенными CSS-стилями position: relative; padding-bottom: 56.25%; height: 0 , а добавить к нему стили position: absolute; top: 0; left: 0; width: 100%; height: 100% :

В результате видео будет пропорционально растянуто, а значения атрибутов width и height проигнорированы.

Чтобы облагородить код, отделим CSS от HTML. Сохраняем стили в соответствующий файл:

div.video < position: relative; padding-bottom: 56.25%; /* соотношение сторон 16:9 */ height: 0; >div.video iframe

После чего для размещения видео на сайте и его корректного отображения достаточно вставить скопированный с YouTube или другого ресурса код с в тег с классом video :

Преимущество вставки видео на сайт Joomla таким способом не требует установки лишних расширений и исключает подключение каких-либо ресурсных файлов. Однако применять шорткоды намного проще, чем всё время держать в памяти HTML-код, но этот момент можно упростить до минимума.

Упрощаем вставку HTML-кода для видео

Если отбросить всё лишнее, то HTML-код для вставки видео выглядит следующим образом:

Т. е. всякий раз, когда необходимо добавить видео на страницу, мы вставляем данный код и в атрибут src копируем URL-адрес. С одной стороны в этом нет ничего сложного, с другой — этот код необходимо помнить.

Упростить задачу можно до самого минимума с помощью специальных расширений:

1. Компонент Content Templater
   Позволяет сохранять отдельные куски кода в качестве шаблонов и вставлять их с помощью кнопки в редакторе.
2. Компонент Snippets
   Позволяет создавать очень короткие заготовки кода с использованием переменных. Шорткод для вставки видео с YouTube в этом компоненте может выглядеть так:

[youtube]tj_V7BDHTxk[/youtube]

Из предложенных вариантов я бы рекомендовал именно RokCandy, т. к. он позволяет использовать короткие коды внутри других шорткодов, что нельзя реализовать через Snippets, синтаксис заготовок которого ограничивается единой конструкцией. Что касается Content Templater, то он просто хранит в себе нужные нам фрагменты кода и облегчает их вставку.

Выводы

1. вставка видео в Joomla с помощью сторонних расширений (AllVideos и другие) добавляет к странице ресурсные файлы, что может негативно отражаться на скорости загрузки;
2. плагин AllVideos конфликтует с JCH Optimize, что является веским аргументом против применения первого;
3. если на сайте активно применяются шорткоды из Shortcode Ultimate (или ему подобных), то целесообразно использовать соответствующий шорткод из этого набора;
4. вставка видео в виде HTML-кода является самым безболезненным для скорости загрузки способом способом;
5. если редактор удаляет тег iframe , значит он находится в списке запрещенных тегов;
6. упростить вставку HTML-кода для видео можно с помощью отдельных расширений.

Источник: joomla.center

Как вставить видео на сайт с Youtube и Контакта за 2 минуты

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

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

Но как вставить видео на свой сайт? Обычно, это можно сделать двумя способами:

1. Разместить видео на собственном хостинге или сервере;
2. Разместить видео на внешнем видеохостинге и вставить код в статью.

Я считаю, что второй способ намного лучше. Как правило, любое видео занимает много места, а на платном хостинге или сервере место ограничено. Например, есть такие тарифы, где дают только 100 МБ или даже меньше :smile:. Если просто писать статьи и оптимизировать картинки, то этого пространства еще хватить на некоторое время, но если вставлять видео, то память быстро закончиться и нужно будет переходить на другой тариф.

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

Если вы будете размещать видео на youtube, а потом через код на сайте, то этих недостатков не будет, более того вы даже можете увеличить посещаемость своего блога. Спросите как? Очень просто. Смотрите, вы записываете видео, оптимизируете его под ключевые слова и сначала загружаете на youtube. Потом просто вставляете код на своем сайте.

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

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

Ладно, не будем отвлекаться, вернемся к нашему главному вопросу: «Как вставить видео с youtube на сайт wordpress?» Если вы решили вставлять собственное видео, то вам сначала нужно загрузить его на youtube, и делается это очень просто. Прежде всего, пройдите регистрацию, а если вы уже зарегистрированы в Google, то на youtube регистрироваться не нужно, просто введите свои данные с Гугла. Кстати, помню, писал статью о том, как создать аккаунт в Гугле, можете воспользоваться этой инструкцией, ничего там сложно нет.

Итак, после регистрации добавляйте свое видео. Делается это очень просто. Нажимаете на кнопку в правом верхнем углу «Добавить видео»:

вы увидите вот такую картинку:

Нажимаете на красную кнопку, находите видео на компьютере, выбираете его и ждете некоторое время пока оно загрузиться. Чем больше видео занимает места, тем больше нужно ждать. Вообще старайтесь загружать не очень объемные видео. Скринкаст можно оптимизировать например в программе Camtasia Studio, о том, как это делать я писал тут.

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

Теперь вы можете вставить это видео в любую статью своего сайта. Просто вставьте этот код через HTML – редактор:

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

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

В самом низу видео есть кнопка «Поделиться», прямо как на youtube :smile:. Нажмите на эту кнопку и потом выберите с выпадающего меню пункт «Экспорт видеозаписи»:

Перед вами должен появиться вот такой HTML-код:

Думаю, вы уже знаете, что с этим кодом нужно сделать :smile:.

Таким же способом можно вставить видео на сайт с Vimeo и Яндекса. Но если вы записываете собственный скринкаст или снимаете живое видео, то лучше всего загружать его на youtube, а уже оттуда на сайт.

На этом я данную статью заканчиваю. Теперь вы знаете, как вставить видео из youtube на сайт. Удачи вам, друзья!

(1 оценок, среднее: 5.00 из 5)

• Страница «О нас» для сайта электронной коммерции — что вы должны сюда включить
• Как сделать бэкап сайта wordpress легко и быстро
• Хлебные крошки на сайте — что это и как они влияют на SEO
• Как проверить позиции сайта в поисковиках и почему это важно знать
• Как добавить сайт в поиск Яндекс?

Источник: vachevskiy.ru

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

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

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

Нажимаете на данную кнопку, после чего перед Вами должна появиться еще одна ссылка, под названием HTML код. Она нам и нужна, кликнув на нее, перед Вами появится код, который Вы должны скопировать и установить на Ваш сайт, где должно располагаться видео.

У данного кода присутствуют параметры ширины и высоты, которые соответственно отвечают за размер видеоплеера. Также, при помощи стилей Вы можете реализовать различные эффекты, которые будут обрамлять ваш плеер. Думаю, Вы видели плеер, который находится внутри монитора, или его с боку обхватывает руками какой-то человек, а также многие другие эффекты. О них мы говорить не будем, а я лишь приведу пример кода, куда мы вставим видео с youtube.

Меню в картинке

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

Для корректного отображения сайта, он должен находиться на хостинге, либо данную страницу необходимо открывать при помощи виртуального сервера(Denwer). Думаю, данный совет будет Вам также полезен. На этом я буду с Вами прощаться, до встречи в новых уроках!

5 последних свежих статей:

Методы alert, prompt, confirm в JavaScript

И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.

Конструкция switch-case в JavaScript

Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.

Всплывающая подсказка на CSS

Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.

Псевдокласс target в CSS

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

Выбор между блочной и табличной вёрсткой.

Среди верстальщиков довольно часто возникают споры по поводу выбора способа вёрстки. Одни отдают предпочтение блочной вёрстке, другие веб – мастера склоняются к табличному способу. Данный вопрос довольно спорный, и те и другие мастера по — своему правы.

Источник: dwebbers.ru