tomasz-syn-grzegorza/site-slavic-pulse-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use YouTube thumbnails as pre-video background and add per-format redirect toggles.

Browse Source 
Replace local BG_IMAGE with dynamic YouTube poster URLs, generate og:image from FHD thumbnail, and allow redirect-or-stay behavior per FHD/vertical format.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Tomasz syn Grzegorza ©
2026-06-27 14:29:35 +02:00
parent 0706909aff
commit c482b1787b
7 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html.template
+36 -13
View File
@@ -24,7 +24,7 @@
<link rel="apple-touch-icon" sizes="180x180" href="${FAVICON_180}">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="${THEME_COLOR}">
<link rel="preload" as="image" href="${BG_IMAGE}">
<link rel="preconnect" href="https://img.youtube.com">
<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://www.google.com">
<style>
@@ -145,7 +145,7 @@
<div id="stage-root">
<div id="stage">
<div id="stage-image" class="stage-layer">
<img src="${BG_IMAGE}" alt="${SITE_OG_IMAGE_ALT}">
<img id="stage-bg" src="" alt="${SITE_OG_IMAGE_ALT}">
</div>
<div id="stage-video" class="stage-layer">
<div id="player"></div>
@@ -158,16 +158,16 @@
fhd: {
id: '${VIDEO_ID_FHD_JS}',
ratio: 16 / 9,
redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}'
redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}',
redirectEnabled: ${POST_VIDEO_REDIRECT_ENABLED_FHD_JS}
},
vertical: {
id: '${VIDEO_ID_VERTICAL_JS}',
ratio: 9 / 16,
redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}'
redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}',
redirectEnabled: ${POST_VIDEO_REDIRECT_ENABLED_VERTICAL_JS}
}
};
const POST_VIDEO_REDIRECT_ENABLED = ${POST_VIDEO_REDIRECT_ENABLED_JS};
const BG_IMAGE = '${BG_IMAGE_JS}';
let player;
let activeFormat;
let activeConfig;
@@ -176,6 +176,23 @@
const stageVideo = document.getElementById('stage-video');
const stage = document.getElementById('stage');
function youtubeThumbnailUrl(videoId, quality) {
return 'https://img.youtube.com/vi/' + videoId + '/' + (quality || 'maxresdefault') + '.jpg';
}
function updateStageBackground() {
const img = document.getElementById('stage-bg');
if (!img || !activeConfig || !activeConfig.id) return;
delete img.dataset.fallback;
img.onerror = function () {
if (!img.dataset.fallback) {
img.dataset.fallback = '1';
img.src = youtubeThumbnailUrl(activeConfig.id, 'hqdefault');
}
};
img.src = youtubeThumbnailUrl(activeConfig.id);
}
function getVideoFormat() {
const w = stage.clientWidth || window.innerWidth;
const h = stage.clientHeight || window.innerHeight;
@@ -217,9 +234,16 @@
iframe.style.margin = '0';
}
activeFormat = getVideoFormat();
activeConfig = resolveConfig(activeFormat);
updateStageBackground();
const stageBg = document.getElementById('stage-bg');
const bgPreload = new Image();
bgPreload.onload = () => loader.classList.add('hidden');
bgPreload.src = BG_IMAGE;
if (stageBg && stageBg.src) {
bgPreload.src = stageBg.src;
}
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
@@ -232,9 +256,7 @@
}
function onYouTubeIframeAPIReady() {
activeFormat = getVideoFormat();
activeConfig = resolveConfig(activeFormat);
if (!activeConfig.id) return;
if (!activeConfig || !activeConfig.id) return;
player = new YT.Player('player', {
height: '100%',
@@ -271,7 +293,7 @@
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
stageVideo.classList.remove('active');
if (POST_VIDEO_REDIRECT_ENABLED && activeConfig.redirectUrl) {
if (activeConfig.redirectEnabled && activeConfig.redirectUrl) {
window.location.href = activeConfig.redirectUrl;
}
}
@@ -279,10 +301,11 @@
function handleResize() {
const newFormat = getVideoFormat();
if (player && newFormat !== activeFormat) {
if (newFormat !== activeFormat) {
activeFormat = newFormat;
activeConfig = resolveConfig(activeFormat);
if (activeConfig.id) {
updateStageBackground();
if (player && activeConfig.id) {
player.loadVideoById(activeConfig.id);
}
}