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>
This commit is contained in:
2026-06-27 13:42:25 +02:00
parent d43e747939
commit 0706909aff
4 changed files with 74 additions and 25 deletions
+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"