Кучу инфы перерыл в сети, вобщем, с трудом нашел на ГетХаб, как сделать трейлер с Ютуба в фоне полной новости.
Вобщем манипуляции то не большие.
В шаблоне полной новости, там, где у вас прописано фоновое изображение, если используется постер или обои, вставляете вот это
в тот же див, получиться должно чтото такое
Перед закрывающимся боди в майн подключаем нужные скрипты
data-vbg-start-at="3" - задержка воспроизведения в секундаю
data-vbg-mute-button="true" - отключение звука, по умолчанию звук выключен
Смысл скрипта такой, при заходе посетителя на страницу главной новости, сначала подгружается фоновое изображение, а через указанное время запускается трейлер в фоне.
Да, чуть не забыл, если ставить так, как есть, то не обрезается верхняя часть трейлера, а там, как обычно рамка, либо, как в моем случае было, непонятные символы поверх видео. Решил это так, поверх всего кода в фулстори вставил это
article - в моем случае это тот контейнер, в который все обернуто
При отрицательном значении весь шаблон полной новости поднимается, на указанное количество пикселей, выше верхней границы видимой части экрана, тем самым обрезая верхнюю часть плеера.
Надеюсь кому-то будет полезным.
Вобщем манипуляции то не большие.
В шаблоне полной новости, там, где у вас прописано фоновое изображение, если используется постер или обои, вставляете вот это
Код:
<div data-vbg="[xfvalue_youtube]" data-vbg-mobile="true" data-vbg-start-at="3" data-vbg-mute-button="true" data-vbg-load-background="false"></div>в тот же див, получиться должно чтото такое
Код:
<div data-vbg="[xfvalue_youtube]" data-vbg-mobile="true" data-vbg-start-at="3" data-vbg-mute-button="true" data-vbg-load-background="false"></div>
<img class="xfieldimage posterbg" src="[xfvalue_slider]" alt="{title}">Перед закрывающимся боди в майн подключаем нужные скрипты
Код:
<!-- youtube_background -->
<script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.js"></script>
<script type="text/javascript">jQuery(document).ready(function() {jQuery('[data-vbg]').youtube_background();const videoBackgrounds = VIDEO_BACKGROUNDS;});</script>
<!-- youtube_background -->data-vbg-start-at="3" - задержка воспроизведения в секундаю
data-vbg-mute-button="true" - отключение звука, по умолчанию звук выключен
Смысл скрипта такой, при заходе посетителя на страницу главной новости, сначала подгружается фоновое изображение, а через указанное время запускается трейлер в фоне.
Да, чуть не забыл, если ставить так, как есть, то не обрезается верхняя часть трейлера, а там, как обычно рамка, либо, как в моем случае было, непонятные символы поверх видео. Решил это так, поверх всего кода в фулстори вставил это
Код:
<style>article {margin-top: -50px;}</style><!-- Отступ сверху -->article - в моем случае это тот контейнер, в который все обернуто
При отрицательном значении весь шаблон полной новости поднимается, на указанное количество пикселей, выше верхней границы видимой части экрана, тем самым обрезая верхнюю часть плеера.
Надеюсь кому-то будет полезным.
Последнее редактирование:
