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

[CabinetAdmin]

Обычные и распространённые ранее ббкоды на форумах 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 КБ) 208 скачиваний

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

Открываем 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.

[eska]

У меня не работает этот bbcode
http://gaz-autoclub.ru/viewtopic.php?f=7&t=1650
bbcode брал из первого сообщения

[CabinetAdmin]

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

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

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

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

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

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

в ней есть лишнее t=46&, потому и не работает.

[eska]

Изменил, толку 0

[CabinetAdmin]

Вот ещё, не обратил в прошлый раз внимание: [youtube]https: у ютуба вроде все ссылки без s. Откуда такая ссылка, с s и t=46?

[CabinetAdmin]

Собрал ещё один вариант ббкода, только теперь на jquery.
Скачать:

jquery.adaptive-youtube.rar

(5.93 КБ) 187 скачиваний

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

Создание ббкода сделал немного по другому, так как из разных мест ютуб даёт разные ссылки. В адресной строке одна ссылка, при копировании ссылки из ролика на 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

[eska]

Спасибо, работает)