Add responsive YouTube short selection by viewport format.

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>

.env.example

@@ -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=...)
+# Short FHD 16:9 (landscape / szeroki viewport) — ID z adresu youtube.com/watch?v=...
-VIDEO_ID=kujXXtoHUbc
+VIDEO_ID_FHD=kujXXtoHUbc
-# Adres docelowy po zakończeniu odtwarzania intro
+POST_VIDEO_REDIRECT_URL_FHD=https://www.youtube.com/watch?v=kujXXtoHUbc
-POST_VIDEO_REDIRECT_URL=https://www.youtube.com/watch?v=kujXXtoHUbc
+# Short vertical 9:16 (portrait / wąski viewport)
-# true = przekierowanie na POST_VIDEO_REDIRECT_URL; false = zostaje obraz tła i strona
+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

@@ -21,6 +21,8 @@ FAVICON_180=/assets/imgs/favico/180x180.png
 FAVICON_512=/assets/imgs/favico/512x512.png
 
 # --- YouTube ---
-VIDEO_ID=kujXXtoHUbc
+VIDEO_ID_FHD=kujXXtoHUbc
-POST_VIDEO_REDIRECT_URL=https://www.youtube.com/watch?v=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

@@ -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}"
+VIDEO_ID_FHD="${VIDEO_ID_FHD:-${VIDEO_ID:-kujXXtoHUbc}}"
-POST_VIDEO_REDIRECT_URL="${POST_VIDEO_REDIRECT_URL:-https://www.youtube.com/watch?v=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")"
+VIDEO_ID_FHD_JS="$(escape_js "$VIDEO_ID_FHD")"
-POST_VIDEO_REDIRECT_URL_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL")"
+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

@@ -154,31 +154,58 @@
     </div>
 
     <script>
-        const VIDEO_ID = '${VIDEO_ID_JS}';
+        const VIDEO_CONFIGS = {
-        const POST_VIDEO_REDIRECT_URL = '${POST_VIDEO_REDIRECT_URL_JS}';
+            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) {
+                if (POST_VIDEO_REDIRECT_ENABLED && activeConfig.redirectUrl) {
-                    window.location.href = POST_VIDEO_REDIRECT_URL;
+                    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 });