Трейлер с ютуба в фоне полной новости

Кучу инфы перерыл в сети, вобщем, с трудом нашел на ГетХаб, как сделать трейлер с Ютуба в фоне полной новости.

Вобщем манипуляции то не большие.


В шаблоне полной новости, там, где у вас прописано фоновое изображение, если используется постер или обои, вставляете вот это

Code:

<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>

в тот же див, получиться должно чтото такое

Code:

<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}">

Перед закрывающимся боди в майн подключаем нужные скрипты

Code:

    <!-- 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" - отключение звука, по умолчанию звук выключен



Смысл скрипта такой, при заходе посетителя на страницу главной новости, сначала подгружается фоновое изображение, а через указанное время запускается трейлер в фоне.


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

Code:

<style>article {margin-top: -50px;}</style><!-- Отступ сверху -->

article - в моем случае это тот контейнер, в который все обернуто

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



Надеюсь кому-то будет полезным.

 

В старт посте прикрепил видео

 

Нет, этот трейлер воспроизводится без звука вместо фонового изображения, к плееру он никакого отношения не имеет. Я же спещиально прикрепил видео.

 

Читать умеешь? Для особо внимательных поясню, бэкграунд трейлер загружается через N секунд после загрузки страницы, то есть, страница загрузилась, в это время в фоне постер, прошло 5 секунд. загружается трейлер и воспроизводится в фоне без звука.

Так же можно добавить отложенную загрузку скрипта и реализацию скрипта из кэша, добакив вот это

Code:

?v={cache-id}

в строчку скрипта. Получится так

Code:

<script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.js?v={cache-id}"></script> 

Вторую часть скрипта можно попробовать вынести в отдельный файл и реализовать так же с отложенной загрузкой и из кэша ( тут я уже не пробовал, но работать должно)

А вечная загрузка будет, если руки у вэбмастера кривые. Вот тэсты по пэйдж спид. Производительность на мобильной ниже из-за метрик, они блокируют основной поток на 290 мс


И VPN не самый быстрый, ZOMRO

 

Почему? Не работает Ютуб или тормозит сильно?

 

Будет время, попробую реализовать то же самое для другого плеера, к примеру AllaTv

 

Не слежу за этими новостями, у нас тут такая жопа закручивается, мы же зажаты между молдовой и украиной, так, что не до ютуба в России.