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>

index.html.template

@@ -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 });