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



Теперь в виде плагина для простой установке в свой шаблон.
Официальный репозиторий https://github.com/tcse/DLE-YouTubePopUp

Скачать архив модуля
Скачать файл: youtubepopup_tcse.zip версия 1.0 [16,59 Kb] (cкачиваний: 54)
Скачать файл: youtubepopup_tcse_1_1.zip версия 1.1 [18,97 Kb] (cкачиваний: 92)



Что бы на картинки роликов из полной новости в шаблоне fullstory.tpl автоматически накладывались иконки плеера, необходимо тег {full-story} обернуть в класс

<div class="full-content">{full-story}</div>





Доработка плагина https://github.com/tcse/YouTube_PopUp для использования в шаблона DLE CMS. Например для RSS информеров в которых используются ссылки на youtube ролики.

Установка

В файле 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>




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

</body>


вставить

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


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


<script>
	$('a[href^="https://www.youtube.com/watch?"]').addClass("bla-1");
	$('a[href^="https://youtu.be/"]').addClass("bla-1");
        $(".full-content > a.bla-1 img").wrap('<div class="ytpu-container"/>');
</script>



Пользуйтесь.

В комплекте идет шаблон для RSS информеров. Файл называется informer_youtube.tpl




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


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


Если вы используете плагин AutoRSS с автоматической загрузкой из RSS видео с Ютуб, то имеет смысл расширить JS файл на следующий код.

<script>
    $('a[href^="https://www.youtube.com/watch?"]').addClass("bla-1");
    $('a[href^="https://youtu.be/"]').addClass("bla-1");
    $(".full-content > a.bla-1 img").wrap('<div class="ytpu-container"/>');
    $('p.source-link-wrapper a[href^="https://www.youtube.com/"]').removeClass("bla-1");
  </script>