Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin



YouTube PopUp jQuery Plugin Для DataLife Engine.
Доработка плагина для использования в шаблона DLE CMS. Например для RSS информеров в которых используются ссылки на youtube ролики. Исходный плагин, перенесен в структуру папок шаблона DLE.

Что в комплекте:


папка [DLE-CMS] содержит готовый набор для добавления в свой шаблон.
папка [original] содержит исходную версию модуля.

Улучшения


Добавлен ключ ?rel=0 для запрета отображения чужих роликов в качестве похожих видео.

Установка в DLE


Загрузить содержимое папки DLE-CMS/tempaltes/{THEME} в ваш шаблон на сайте.

В файле main.tpl найти место подключения jQuery, напоминаю, что он уже есть в любой версии DLE. Обычно он загружается переменной {jsfiles}{AJAX} если скрипты вынесены в коней файла.

Или перед закрывающим тегом

</body>

Если используется классический способ подключения стилей и JS.

После jQuery Вставить:

{* YouTube_PopUp *}
<link rel="stylesheet" type="text/css" href="{THEME}/assets/youtubepopup/YouTubePopUp.css">
<script type="text/javascript" src="{THEME}/assets/youtubepopup/YouTubePopUp.jquery.js"></script>
<script type="text/javascript">
  jQuery(function(){
      jQuery("a.bla-1").YouTubePopUp();
      jQuery("a.bla-2").YouTubePopUp( { autoplay: 0 } ); // Disable autoplay
  });
</script>


В шаблоне RSS информера informer.tpl для загрузки роликов по клику на картинку-превью с ютуба использовать код


Где класс bla-1 - открытие модального окна с автоматическим запусков видео, а класс bla-2 - открытие окна с отключенным автозапуском видео.

Если же необходимо добавить запуск окна с плеером YouTube для всех ссылок на сайте, которые ведут на https://www.youtube.com/ тогда добавьте

 $('a[href^="https://www.youtube.com/watch?"]').addClass("bla-2");


и получиться что-то вроде

{* YouTube_PopUp *}
<link rel="stylesheet" type="text/css" href="{THEME}/assets/youtubepopup/YouTubePopUp.css">
<script type="text/javascript" src="{THEME}/assets/youtubepopup/YouTubePopUp.jquery.js"></script>
<script type="text/javascript">
	$('a[href^="https://www.youtube.com/watch?"]').addClass("bla-2");
	jQuery(function(){
	  jQuery("a.bla-1").YouTubePopUp();
	  jQuery("a.bla-2").YouTubePopUp( { autoplay: 0 } ); // Disable autoplay
	});
</script>


Пояснение:
Сылка вида https://www.youtube.com/watch? - отвечает за формирование адреса на страницу с конкретным роликом.
Ссылка вида https://www.youtube.com/channel/ - вывод роликов с определенного канала (для работы скрипта отображения в модальном окне не подходит)
Ссылка вида https://www.youtube.com/playlist? - вывод плейлиста.

DEMO для DLE
https://chuyakov.ru/#demoVideo


Скачать плагин YouTube PopUp jQuery Plugin Для DataLife Engine


https://github.com/tcse/YouTube_PopUp

Крайне полезный хак! Позволяет использовать теги RSS информеров не только в шаблоне main.tpl но и в любых иных на ваше усмотрение.
globalnyj-teg-inform.xml [1,53 Kb] (cкачиваний: 3)
ссылка на сайт разработчика https://lazydev.pro/fcode/42-global-tag-inform.html


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


Похожие публикации

Шаблон для простого модуля в DLE 13

обсуждение публикации Заготовка под простой плагин для DLE 13 а так же готовые варианты модулей со справочной информацией созданных на основе данного шаблона.... читать далее

Шаблон версии для печати print.tpl для DLE

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

Переключение шаблонов мобильной и настольной версии сайта в DLE

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

TCSE_call-mod для DLE

Модуль «Обратный звонок» предназначен для вывода на сайте формы отправки менеджерам сайта информации с телефоном клиента (если он будет указан). Типовое применение - плавающая панель на корпоративном... читать далее

Снег на сайте - Jquery плагин

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

Jquery / Фиксим плагин jGrowl в IE 7

Сегодня с удивлением обнаружил, что популярный в народе jQuery-плагин для показа сообщений jGrowl версии 1.1.1 не работает в IE7. Вернее, сами сообщения отображается, но где-то внизу. В других... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent