Показать сообщение отдельно
Старый Сегодня, 03:15 Вверх   #10
Местный житель
 
Аватар для Razielik
Razielik вне форума
Доп. информация
Радость Финальные правки ошибок YouTube плеера с функцией "ленивой загрузки"

Как выяснил при тестировании, быдлокодик имел небольшой изъян. Проблема в том, что видео, добавленное в посты не поддавалось позиционированию стандартными BB кодами (лево/право/центр и отступ), также, возможно, была проблема при использовании jquery и ajax, при использовании спойлера от VSQ).

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

В footer добавляем:

Код:
<style>
.youtube-lazy {
  position: relative;
  cursor: pointer;
  background: #000;
  overflow: hidden;
  display: inline-block; /* чтобы можно было контролировать ширину */
}

.youtube-lazy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-lazy .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: url('<путь к кнопке>.png') no-repeat center/contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  function getYouTubeID(url) {
    var regExp = /(?:youtube\.com.*(?:[?&]v=)|youtu\.be\/)([^&#]+)/;
    var match = url.match(regExp);
    return (match && match[1]) ? match[1] : null;
  }

  var players = document.querySelectorAll('.youtube-lazy');
  players.forEach(function(player) {
    var url = player.getAttribute('data-url') || '';

    var width = 640;
    var height = 360;

    player.style.width = width + 'px';
    player.style.height = height + 'px';

    var videoId = getYouTubeID(url);
    if (!videoId) return;

    var img = player.querySelector('img');
    if (img) img.src = 'httрs://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';

    player.addEventListener('click', function() {
      var iframe = document.createElement('iframe');
      iframe.setAttribute('src', 'https://www.yоutube.com/embed/' + videoId + '?autoplay=1');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', '1');
      iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      this.innerHTML = '';
      this.appendChild(iframe);
    });
  });
});
</script>
А в замен стандартного BB в шаблоне BBcode_video (напомню, ищется по фразе "youtube" - без кавычек):

Код:
<vb:elseif condition="$provider == 'youtube'" />
<div class="youtube-lazy" data-url="httрs://www.yоutube.com/watch?v={vb:raw code}" style="display: inline-block; width: 640px; height: 360px; cursor: pointer; background: black; position: relative;">
  <img loading="lazy" src="httрs://img.yоutube.com/vi/{vb:raw code}/hqdefault.jpg" alt="Щелкнуть для воспроизведения" style="width:100%; height:100%; object-fit: cover; display: block;">
  <div style="position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: url('<путь к кнопке>.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-url="httрs://www.yоutube.com/watch?v={vb:raw code}" style="display: inline-block; width: 640px; height: 360px; cursor: pointer; background: black; position: relative;">
  <img loading="lazy" src="httрs://img.yоutube.com/vi/{vb:raw code}/hqdefault.jpg" alt="Щелкнуть для воспроизведения" style="width:100%; height:100%; object-fit: cover; display: block;">
  <div style="position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: url('<путь к кнопке>.png') no-repeat center/contain; transform: translate(-50%, -50%); pointer-events: none;"></div>
</div>
(Везде в коде замените в httрs://www.yоutube.com указанные мной буквы на латинские/английские. А то здешний форум странно отображал содержимое моего поста даже обрамленным в теге "код".)

Теперь всё! Всё работает как надо, вроде. Тестирую вот уже как 2 дня. В форум влилась скорость...

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

Последний раз редактировалось Razielik; Сегодня в 03:40..
  Ответить с цитированием
 
Время генерации страницы 0.29936 секунды с 9 запросами