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

Add responsive YouTube short selection by viewport format.

Browse Source 
Choose FHD 16:9 or vertical 9:16 intro from .env based on browser aspect ratio, with per-format redirect URLs and orientation change handling.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Tomasz syn Grzegorza ©
2026-06-27 13:42:25 +02:00
parent d43e747939
commit 0706909aff
4 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+7 -5
View File
@@ -24,9 +24,11 @@ FAVICON_180=/assets/imgs/favico/180x180.png
FAVICON_512=/assets/imgs/favico/512x512.png
# --- YouTube ---
# ID filmu intro (z adresu youtube.com/watch?v=...)
VIDEO_ID=kujXXtoHUbc
# Adres docelowy po zakończeniu odtwarzania intro
POST_VIDEO_REDIRECT_URL=https://www.youtube.com/watch?v=kujXXtoHUbc
# true = przekierowanie na POST_VIDEO_REDIRECT_URL; false = zostaje obraz tła i strona
# Short FHD 16:9 (landscape / szeroki viewport) — ID z adresu youtube.com/watch?v=...
VIDEO_ID_FHD=kujXXtoHUbc
POST_VIDEO_REDIRECT_URL_FHD=https://www.youtube.com/watch?v=kujXXtoHUbc
# Short vertical 9:16 (portrait / wąski viewport)
VIDEO_ID_VERTICAL=YOUR_VERTICAL_SHORT_ID
POST_VIDEO_REDIRECT_URL_VERTICAL=https://www.youtube.com/shorts/YOUR_VERTICAL_SHORT_ID
# true = przekierowanie po filmie (URL zależy od formatu); false = zostaje obraz tła
POST_VIDEO_REDIRECT_ENABLED=true
docker-compose-example/.env.example
+4 -2
View File
@@ -21,6 +21,8 @@ FAVICON_180=/assets/imgs/favico/180x180.png
FAVICON_512=/assets/imgs/favico/512x512.png
# --- YouTube ---
VIDEO_ID=kujXXtoHUbc
POST_VIDEO_REDIRECT_URL=https://www.youtube.com/watch?v=kujXXtoHUbc
VIDEO_ID_FHD=kujXXtoHUbc
POST_VIDEO_REDIRECT_URL_FHD=https://www.youtube.com/watch?v=kujXXtoHUbc
VIDEO_ID_VERTICAL=YOUR_VERTICAL_SHORT_ID
POST_VIDEO_REDIRECT_URL_VERTICAL=https://www.youtube.com/shorts/YOUR_VERTICAL_SHORT_ID
POST_VIDEO_REDIRECT_ENABLED=true
generate-from-env.sh
+10 -6
View File
@@ -28,8 +28,10 @@ FAVICON_48="${FAVICON_48:-/assets/imgs/favico/48x48.png}"
FAVICON_180="${FAVICON_180:-/assets/imgs/favico/180x180.png}"
FAVICON_512="${FAVICON_512:-/assets/imgs/favico/512x512.png}"
VIDEO_ID="${VIDEO_ID:-kujXXtoHUbc}"
POST_VIDEO_REDIRECT_URL="${POST_VIDEO_REDIRECT_URL:-https://www.youtube.com/watch?v=kujXXtoHUbc}"
VIDEO_ID_FHD="${VIDEO_ID_FHD:-${VIDEO_ID:-kujXXtoHUbc}}"
VIDEO_ID_VERTICAL="${VIDEO_ID_VERTICAL:-}"
POST_VIDEO_REDIRECT_URL_FHD="${POST_VIDEO_REDIRECT_URL_FHD:-${POST_VIDEO_REDIRECT_URL:-https://www.youtube.com/watch?v=kujXXtoHUbc}}"
POST_VIDEO_REDIRECT_URL_VERTICAL="${POST_VIDEO_REDIRECT_URL_VERTICAL:-}"
POST_VIDEO_REDIRECT_ENABLED="${POST_VIDEO_REDIRECT_ENABLED:-true}"
OG_IMAGE_URL="${SITE_BASE_URL}${BG_IMAGE}"
@@ -38,8 +40,10 @@ escape_js() {
printf '%s' "$1" | sed "s/'/\\\\'/g"
}
VIDEO_ID_JS="$(escape_js "$VIDEO_ID")"
POST_VIDEO_REDIRECT_URL_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL")"
VIDEO_ID_FHD_JS="$(escape_js "$VIDEO_ID_FHD")"
VIDEO_ID_VERTICAL_JS="$(escape_js "$VIDEO_ID_VERTICAL")"
POST_VIDEO_REDIRECT_URL_FHD_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL_FHD")"
POST_VIDEO_REDIRECT_URL_VERTICAL_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL_VERTICAL")"
BG_IMAGE_JS="$(escape_js "$BG_IMAGE")"
case "$(printf '%s' "$POST_VIDEO_REDIRECT_ENABLED" | tr '[:upper:]' '[:lower:]')" in
@@ -49,9 +53,9 @@ esac
export SITE_TITLE SITE_SHORT_NAME SITE_BASE_URL SITE_DESCRIPTION TWITTER_DESCRIPTION SITE_OG_IMAGE_ALT
export THEME_COLOR BG_IMAGE FAVICON_48 FAVICON_180 FAVICON_512 OG_IMAGE_URL
export VIDEO_ID_JS POST_VIDEO_REDIRECT_URL_JS BG_IMAGE_JS POST_VIDEO_REDIRECT_ENABLED_JS
export VIDEO_ID_FHD_JS VIDEO_ID_VERTICAL_JS POST_VIDEO_REDIRECT_URL_FHD_JS POST_VIDEO_REDIRECT_URL_VERTICAL_JS BG_IMAGE_JS POST_VIDEO_REDIRECT_ENABLED_JS
TEMPLATE_VARS='${SITE_TITLE} ${SITE_SHORT_NAME} ${SITE_BASE_URL} ${SITE_DESCRIPTION} ${TWITTER_DESCRIPTION} ${SITE_OG_IMAGE_ALT} ${THEME_COLOR} ${BG_IMAGE} ${FAVICON_48} ${FAVICON_180} ${FAVICON_512} ${OG_IMAGE_URL} ${VIDEO_ID_JS} ${POST_VIDEO_REDIRECT_URL_JS} ${BG_IMAGE_JS} ${POST_VIDEO_REDIRECT_ENABLED_JS}'
TEMPLATE_VARS='${SITE_TITLE} ${SITE_SHORT_NAME} ${SITE_BASE_URL} ${SITE_DESCRIPTION} ${TWITTER_DESCRIPTION} ${SITE_OG_IMAGE_ALT} ${THEME_COLOR} ${BG_IMAGE} ${FAVICON_48} ${FAVICON_180} ${FAVICON_512} ${OG_IMAGE_URL} ${VIDEO_ID_FHD_JS} ${VIDEO_ID_VERTICAL_JS} ${POST_VIDEO_REDIRECT_URL_FHD_JS} ${POST_VIDEO_REDIRECT_URL_VERTICAL_JS} ${BG_IMAGE_JS} ${POST_VIDEO_REDIRECT_ENABLED_JS}'
mkdir -p "$OUTPUT_DIR"
index.html.template
+53 -12
View File
@@ -154,31 +154,58 @@
</div>
<script>
const VIDEO_ID = '${VIDEO_ID_JS}';
const POST_VIDEO_REDIRECT_URL = '${POST_VIDEO_REDIRECT_URL_JS}';
const VIDEO_CONFIGS = {
fhd: {
id: '${VIDEO_ID_FHD_JS}',
ratio: 16 / 9,
redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}'
},
vertical: {
id: '${VIDEO_ID_VERTICAL_JS}',
ratio: 9 / 16,
redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}'
}
};
const POST_VIDEO_REDIRECT_ENABLED = ${POST_VIDEO_REDIRECT_ENABLED_JS};
const BG_IMAGE = '${BG_IMAGE_JS}';
let player;
let activeFormat;
let activeConfig;
const loader = document.getElementById('loader');
const stageVideo = document.getElementById('stage-video');
const stage = document.getElementById('stage');
const VIDEO_RATIO = 16 / 9;
function getVideoFormat() {
const w = stage.clientWidth || window.innerWidth;
const h = stage.clientHeight || window.innerHeight;
return w >= h ? 'fhd' : 'vertical';
}
function resolveConfig(format) {
const config = VIDEO_CONFIGS[format];
if (config.id) return config;
const fallbackKey = format === 'fhd' ? 'vertical' : 'fhd';
const fallback = VIDEO_CONFIGS[fallbackKey];
if (fallback.id) return fallback;
return config;
}
function sizeVideoCover() {
const iframe = document.querySelector('#stage-video iframe');
if (!stage || !iframe) return;
if (!stage || !iframe || !activeConfig) return;
const ratio = activeConfig.ratio;
const w = stage.clientWidth;
const h = stage.clientHeight;
let iw, ih;
if (w / h > VIDEO_RATIO) {
if (w / h > ratio) {
iw = w;
ih = w / VIDEO_RATIO;
ih = w / ratio;
} else {
ih = h;
iw = h * VIDEO_RATIO;
iw = h * ratio;
}
iframe.style.width = iw + 'px';
@@ -205,12 +232,14 @@
}
function onYouTubeIframeAPIReady() {
if (!VIDEO_ID) return;
activeFormat = getVideoFormat();
activeConfig = resolveConfig(activeFormat);
if (!activeConfig.id) return;
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: VIDEO_ID,
videoId: activeConfig.id,
playerVars: {
autoplay: 1,
mute: 0,
@@ -242,13 +271,25 @@
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
stageVideo.classList.remove('active');
if (POST_VIDEO_REDIRECT_ENABLED && POST_VIDEO_REDIRECT_URL) {
window.location.href = POST_VIDEO_REDIRECT_URL;
if (POST_VIDEO_REDIRECT_ENABLED && activeConfig.redirectUrl) {
window.location.href = activeConfig.redirectUrl;
}
}
}
window.addEventListener('resize', sizeVideoCover);
function handleResize() {
const newFormat = getVideoFormat();
if (player && newFormat !== activeFormat) {
activeFormat = newFormat;
activeConfig = resolveConfig(activeFormat);
if (activeConfig.id) {
player.loadVideoById(activeConfig.id);
}
}
sizeVideoCover();
}
window.addEventListener('resize', handleResize);
document.getElementById('stage-root').addEventListener('pointerdown', enableVideoSound, { once: true });