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

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

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

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

[youtube]{TEXT1}youtu{TEXT2}{SIMPLETEXT}[/youtube]
Замена HTML

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

<div class="youtube-container-parent"><div class="youtube-container-child"><div class="youtube-video" data-id="{SIMPLETEXT}"></div></div></div>
Подсказка

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

Ссылка на видео [youtube]https://www.youtube.com/watch?v=V94lUearVU0[/youtube]
Далее скачиваем архив
adaptive-youtube.rar
6.07 КБ 511 скачиваний
и закачиваем к себе на форум в одноимённые папки вашего используемого стиля.

Или в теме находим Вариант на jquery.

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

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

@import url("adaptive-youtube.css");
Плюс не забудьте указать точный путь до изображения, если он отличается от уже заданного.


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

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/adaptive-youtube.js"></script>
Для форумов на phpbb 3.1 и выше. Открываем overall_footer.html и находим:

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

<!-- EVENT overall_footer_after -->
добавляем перед:

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

<!-- INCLUDEJS adaptive-youtube.js -->
или:

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

<!-- INCLUDEJS jquery.adaptive-youtube.js -->
в зависимости от выбранного варианта.

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

Вариант на jquery - viewtopic.php?p=68727#p68727
Комментарии: 14

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

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

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&, потому и не работает.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

Собрал ещё один вариант ббкода, только теперь на jquery.
Скачать:
jquery.adaptive-youtube.rar
5.93 КБ 469 скачиваний
Принципиальных различий нет.

Создание ббкода сделал немного по другому, так как из разных мест ютуб даёт разные ссылки. В адресной строке одна ссылка, при копировании ссылки из ролика на 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
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

CrazyManАндрей 16 апр 2023, 13:58 Сообщение

CabinetAdmin писал(а): 20 июн 2015, 15:24 Собрал ещё один вариант ббкода, только теперь на jquery.
Скачать:
jquery.adaptive-youtube.rar

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

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


Изображение
  • 0

CabinetAdmin 16 апр 2023, 20:46 Сообщение

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

[youtube]https://www.youtube.com/watch?v=LGFOkToQbRk[/youtube]
Я не знаю что вы делаете не так. Вот я добавляю ссылку на ролик, здесь на форуме стоит этот же ббкод, и он работает.

Что значит не воспроизводит? Ошибки может какие нибудь в консоли? Так просто я не могу сказать, что у вас не так.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CrazyManАндрей 17 апр 2023, 10:22 Сообщение

Вот еще раз делал на стиле prosilver дабы не сломать себе форум. Все тестирую на локалке для начало.

Покажу все в скриншотах.
Адаптивный bbcode YouTube. - 1.png
Адаптивный bbcode YouTube. - 2.png
Адаптивный bbcode YouTube. - 3.png
Адаптивный bbcode YouTube. - 4.png
Адаптивный bbcode YouTube. - 5.png
  • 0

CabinetAdmin 17 апр 2023, 16:12 Сообщение

Физически файлы скопировали в стиль? adaptive-youtube.css в папку theme стиля, а jquery.adaptive-youtube.js в template?

Плюс небольшие замечания. Раз ставится версия на jquery, а по скриншоту ббкода, это именно он, то:

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/adaptive-youtube.js"></script>
ставится не должно, и вместо:

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

<!-- INCLUDEJS adaptive-youtube.js -->
должно быть:

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

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

зы. Этот момент со скриптом немного недоописан в инструкции, немного запутывает. Надо подправить этот момент.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CrazyManАндрей 19 апр 2023, 02:44 Сообщение

Спасибо вам за помощь.
Дело все было в <!-- INCLUDEJS jquery.adaptive-youtube.js --> теперь все работает. :ihaaaa:
  • 0

CrazyManАндрей 31 май 2023, 10:38 Сообщение

Здравствуйте.
Случился какой то трабл. При вставки видео сверху появляется ошибка. С чем это связано не пойму. :(

Изображение
  • 0

CabinetAdmin 31 май 2023, 16:16 Сообщение

Странно, и срабатывает только на этом ббкоде?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CrazyManАндрей 31 май 2023, 20:01 Сообщение

CabinetAdmin писал(а): 31 май 2023, 16:16 Странно, и срабатывает только на этом ббкоде?
Да вот не могу понять все бб кода перепробовал. На каком и тапе это появляется не знаю, но это не всегда.
  • 0

Похожие темы