[Razielik]

Нашло тут вдохновение. Т.к. инфу по тому, что я сделал, найти сложновато, особенно в одном месте, решил поделиться. Может кому понадобится.

Идем в "стили и шаблоны" и открываем шаблон "footer".

В конце шаблона добавляем вот такой код:

<style>
.youtube-lazy {
  position: relative;
  cursor: pointer;
}
.youtube-lazy .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: url('/images/yt_plbtn.png') no-repeat center / contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.youtube-lazy').forEach(function(div) {
    div.addEventListener('click', function() {
      var videoId = div.getAttribute('data-video-id');
      var iframe = document.createElement('iframe');
      iframe.setAttribute('width', '640');
      iframe.setAttribute('height', '360');
      iframe.referrerPolicy = "strict-origin-when-cross-origin";
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
      iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
      div.parentNode.replaceChild(iframe, div);
    });
  });
});
</script>

Затем нам нужно отредактировать там же в "шаблонах" BB-код для вывода YouTube.

Ищем по фразе "youtube" (без кавычек).

Вот оригинальный код:

<vb:elseif condition="$provider == 'youtube'" />
<iframe width="640" height="360" style="background:url(../images/bg.png);" src="https://www.youtube.com/embed/{vb:raw code}" loading="lazy" frameborder="0" allowFullScreen ></iframe>
<vb:elseif condition="$provider == 'youtube_share'" />
<iframe class="restrain" title="YouTube video player" width="640" height="360" style="background:url(../images/bg.png);" src="//www.youtube.com/embed/{vb:raw code}" loading="lazy" frameborder="0" allowfullscreen ></iframe>

он шел изначально в движке.

Если добавить строчку referrerpolicy="strict-origin-when-cross-origin" в код, чтоб получилось вот это:

<vb:elseif condition="$provider == 'youtube'" />
<iframe width="640" height="360" style="background:url(../images/bg.png);" src="https://www.youtube.com/embed/{vb:raw code}" loading="lazy" frameborder="0" allowFullScreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
<vb:elseif condition="$provider == 'youtube_share'" />
<iframe class="restrain" title="YouTube video player" width="640" height="360" style="background:url(../images/bg.png);" src="//www.youtube.com/embed/{vb:raw code}" loading="lazy" frameborder="0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>

то перестанет выпадать ошибка видеоплеера (например о "недоступности видео" или "Ошибка 153", что актуально с недавних пор).

Но видео при этом будет нагружать страницу. Особенно это заметно, когда видео на странице очень много.

Чтобы это исправить, вдобавок к коду в Футере (см. начало) вставляем заместо оригинального вот этот:

<vb:elseif condition="$provider == 'youtube'" />
<div class="youtube-lazy" data-video-id="{vb:raw code}" style="width:640px; height:360px; cursor:pointer; position:relative;">
  <img loading="lazy" src="https://img.youtube.com/vi/{vb:raw code}/hqdefault.jpg" alt="Click to Play" style="width:100%; height:100%; object-fit:cover; display:block;">
  <div class="play-button" style="position:absolute; top:50%; left:50%; width:80px; height:80px; background:url('/images/yt_plbtn.png') no-repeat center/contain; transform:translate(-50%, -50%); pointer-events:none;"></div>
</div>
<vb:elseif condition="$provider == 'youtube_share'" />
<div class="youtube-lazy" data-video-id="{vb:raw code}" style="width:640px; height:360px; cursor:pointer; position:relative;">
  <img loading="lazy" src="https://img.youtube.com/vi/{vb:raw code}/hqdefault.jpg" alt="Click to Play" style="width:100%; height:100%; object-fit:cover; display:block;">
  <div class="play-button" style="position:absolute; top:50%; left:50%; width:80px; height:80px; background:url('/images/yt_plbtn.png') no-repeat center/contain; transform:translate(-50%, -50%); pointer-events:none;"></div>
</div>

Это все дает то, что iframe'ы с многочисленными видео, при открытии страницы, не грузятся сразу. Мало того, дополнительно не сразу грузятся даже превьюшки для видео, а только по мере "подматывания" страницы ближе к ним (то бишь, когда они попадают в поле видимости). А сам iframe с видео подгружается по клику на область превью.

В итоге имеем очень неслабое ускорение для прогрузки открываемых страниц с кучей видео YouTube.

Да, надо не забыть залить кнопочку в формате PNG в директорию форума...

P.S.: В теории этот трюк можно провернуть не только с видео YouTube, но и с любой мультимедиа и видео с других хостингов, что использует iframe для вывода.