Адаптивный bbcode YouTube.

BBCode — это специальный вариант HTML
С помощью BBcode - вы сможете отформатировать текст в сообщении, вставить видео, картинки и многое другое.
Аватара пользователя
CabinetAdmin

Адаптивный bbcode YouTube.

CabinetAdmin 07 май 2015, 18:00 Сообщение

Обычные и распространённые ранее ббкоды на форумах phpbb, для встраивания видео с хостинга YouTube, имеют один большой минус, особенно для форумов на новой версии phpbb 3.1.x, они не адаптивны. И так как дизайн новой версии легко адаптируется под изменяющийся размер экрана и отлично выглядит на мобильных девайсах, то видео, вставленное ещё в прошлой версии и отлично там отрабатывающее своё предназначение, здесь будет выходить за границы, а возможно и ломать структуру форума. Да и посмотреть комфортно видео уже не получится.
Данная модификация позволяет исправить недостатки старых версий ббкода и создать адаптивный плеер через iframe.

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

Первым делом нам нужно изменить старый ббкод, если у вас его не было, то создать:
Использование BBCode

Код: Выделить всё

[youtube]http://www.youtube.com/watch?v={SIMPLETEXT}[/youtube]


Замена HTML

Код: Выделить всё

<div class="youtube-container-parent"><div class="youtube-container-child"><div class="youtube-video" data-id="{SIMPLETEXT}"></div></div></div>


Подсказка

Код: Выделить всё

Ссылка на видео [youtube]http://www.youtube.com/watch?v=V94lUearVU0[/youtube]


Далее скачиваем архив
adaptive-youtube.rar
(6.07 КБ) 180 скачиваний

и закачиваем к себе на форум в одноимённые папки вашего используемого стиля.
Для форумов в нашей системе в менеджер картинок.

Открываем stylesheet.css и в конец файла добавляем:

Код: Выделить всё

@import url("adaptive-youtube.css");

Для форумов в нашей системе в тему стиля (content.css) перед:

Код: Выделить всё

/* Attachments ----------------------------------------*/


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

Открываем overall_footer.html и перед </body> добавляем:

Код: Выделить всё

<script type="text/javascript" src="{T_TEMPLATE_PATH}/adaptive-youtube.js"></script>

Для форумов в нашей системе указываем путь полученный в менеджере картинок.
Для форумов на phpbb 3.1.x, находим:

Код: Выделить всё

<!-- EVENT overall_footer_after -->

добавляем перед:

Код: Выделить всё

<!-- INCLUDEJS adaptive-youtube.js -->


Пример такого ббкода можно посмотреть на нашем форуме:



Вариант на jquery - Адаптивный bbcode YouTube.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Адаптивный bbcode YouTube.

eska 12 май 2015, 16:46 Сообщение

У меня не работает этот bbcode
http://gaz-autoclub.ru/viewtopic.php?f=7&t=1650
bbcode брал из первого сообщения
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

Аватара пользователя
CabinetAdmin

Адаптивный bbcode YouTube.

CabinetAdmin 12 май 2015, 20:10 Сообщение

Ссылка должна выглядеть как в подсказке:

Код: Выделить всё

[youtube]http://www.youtube.com/watch?v=V94lUearVU0[/youtube]

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

Код: Выделить всё

[youtube]https://www.youtube.com/watch?t=46&v=0hM0npaYKOw[/youtube]

в ней есть лишнее t=46&, потому и не работает.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Адаптивный bbcode YouTube.

eska 12 май 2015, 20:22 Сообщение

Изменил, толку 0 :unknown
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

Аватара пользователя
CabinetAdmin

Адаптивный bbcode YouTube.

CabinetAdmin 13 май 2015, 15:25 Сообщение

Вот ещё, не обратил в прошлый раз внимание: [youtube]https: у ютуба вроде все ссылки без s. Откуда такая ссылка, с s и t=46?
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Адаптивный bbcode YouTube.

CabinetAdmin 20 июн 2015, 15:24 Сообщение

Собрал ещё один вариант ббкода, только теперь на jquery.
Скачать:
jquery.adaptive-youtube.rar
(5.93 КБ) 160 скачиваний


Принципиальных различий нет.

Создание ббкода сделал немного по другому, так как из разных мест ютуб даёт разные ссылки. В адресной строке одна ссылка, при копировании ссылки из ролика на flash (старые виды ббкода) другая, а ещё попадаются ссылки с https и t=46. Чтобы все ссылки работали ставим такой ббкод:

Код: Выделить всё

[youtube]{TEXT1}youtu{TEXT2}{SIMPLETEXT}[/youtube]


Замена HTML

Код: Выделить всё

<div class="youtube-container-parent"> <div class="youtube-container-child"> <div class="youtube-video" data-id="{SIMPLETEXT}"> <img class="youtube-thumb" src="//i.ytimg.com/vi/{SIMPLETEXT}/hqdefault.jpg" alt="" /><div class="play-button"></div> </div> </div> </div>


Остальная установка такая же, за исключением ссылки на скрипт - jquery.adaptive-youtube.js
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Адаптивный bbcode YouTube.

eska 31 июл 2015, 12:40 Сообщение

Спасибо, работает)
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php



Похожие темы

Вернуться в «Пользовательские BBCode для phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: Yahoo [Bot] и 1 гость