Как выяснил при тестировании, быдлокодик имел небольшой изъян. Проблема в том, что видео, добавленное в посты не поддавалось позиционированию стандартными 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 дня. В форум влилась скорость...
Когда-нибудь напишу свой универсальный плеер для разных хостингов. А пока реанимировал самый популярный, так сказать.