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

Наши разработки | Плагины для DLE / Скачать модули для DLE | 10 сентября 2020 5 616

jquery, плагин, JS, верстка, мы рекомендуем



Теперь в виде плагина для простой установке в свой шаблон.
Официальный репозиторий https://github.com/tcse/DLE-YouTubePopUp
Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin
Скачать архив модуля
Скачать файл: youtubepopup_tcse.zip версия 1.0 [16,59 Kb] (cкачиваний: 85)
Скачать файл: youtubepopup_tcse_1_1.zip версия 1.1 [18,97 Kb] (cкачиваний: 127)



Что бы на картинки роликов из полной новости в шаблоне 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качиваний: 102)
ссылка на сайт разработчика 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>
Как наложить иконку плеера поверх картинки на примере youtube превью

При использовании великолепного плагина YouTube PopUp jQuery Plugin который позволяет любой ссылке ведущей на страницу...

Подробнее
AMP версия DLE на основе страницы для печати - плагин DLE-print-page4amp

Исправление для DLE 15.1 Еще один плагин генерации AMP страниц для DLE, теперь на основе версии для печати. Перед тем...

Подробнее
AMP4DLE - плагин AMP страниц для DLE

Актуальная версия плагина AMP для DLE https://tcse-cms.com/works/1775-dle-print-page4amp.html Модуль AMP страниц для...

Подробнее
instant articles для dle - плагин DLE-rss-instant-articles

instant articles для Facebook в формате RSS Очень специфический плагин, предназначенный для облегчения работы smm...

Подробнее
Как добавить title на основе alt у тега img

В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на...

Подробнее
Плагин TimThumb от TCSE - кадрирование картинок для DLE

Кадрирование картинок на сайте для DLE Доработка плагина http://www.binarymoon.co.uk/projects/timthumb/ для...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями