themes-gotham/templates/overrides/gotham/video-embed.ninjatpl
Alex Dunmow 8da60d7d5a feat(gotham): Wave A theme-fleet rework — nightlife/private-club identity (WO-TF-018)
Re-skin gotham to the locked nightlife / private members' club persona:
cinematic near-black luxe, brass hairline accents, letterboxed heroes and
tall condensed display type. Codeless .bnp; MID motion tier (JS effects, no
canvas), prefers-reduced-motion honored, no-JS fallback.

- 49 mandatory builtin overrides in templates/overrides/gotham/ (chrome,
  marketing, primitives, commerce/local, blog family, auth surface, 404).
  Field reads, provider fields, form wiring and block JS preserved verbatim
  from the frozen builtins (cms a0f07e2ae); only presentation reskinned.
- 8 page templates (default, landing, article, full-width, blog-index,
  contact, auth + retained centered), dual-mode via theme_mode.
- 4 persona blocks: door_strip, events_marquee, membership_tiers, bottle_menu.
  Removed old theme blocks that duplicated builtins (hero, stats, features,
  footer) — now overrides.
- 5 dual-mode presets (all 19 tokens, light + dark intentional).
- Bundled OFL woff2: Antonio (heading), Cormorant Garamond (body), Inter
  (meta), IBM Plex Mono (mono); all font-family via var(--font-*).
- Themed email-safe wrapper, master pages, seed demo (home/about/blog x3/
  contact+workflow/login) in private-club voice.
- Gotham utility CSS (reel-*, film-grain, spotlight, letterbox-scrim, reveal)
  via manifest css.input_css_append; semantic color tokens only.
- plugin.mod kind="theme", required_icon_packs=["lucide"]; *.bnp gitignored.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 11:18:21 +08:00

24 lines
3.2 KiB
Plaintext

{# video-embed override — gold-framed facade; play button in a gold-ringed medallion. Fields + facade JS mirror builtin verbatim: aspect, url, media, poster, title, caption. #}
{% with aspect=aspect|default:"16:9" %}<figure data-block-override="gotham:video-embed" class="bn-video my-8{% if class %} {{ class }}{% endif %}"><div class="reel-mat"><div class="bn-video-frame relative w-full overflow-hidden bg-muted {% if aspect == "4:3" %}aspect-[4/3]{% elif aspect == "1:1" %}aspect-square{% elif aspect == "21:9" %}aspect-[21/9]{% else %}aspect-video{% endif %}" data-bn-video data-video-url="{{ url|default:"" }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}"><button type="button" data-bn-video-play class="group absolute inset-0 flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" aria-label="Play video{% if title %}: {{ title }}{% endif %}">{% if poster %}{% img poster alt=title|default:"" class="absolute inset-0 h-full w-full object-cover" %}{% endif %}<span class="absolute inset-0 bg-foreground/10 transition-colors group-hover:bg-foreground/20" aria-hidden="true"></span><span class="reel-foil relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-background/90 text-primary transition-transform group-hover:scale-105 motion-reduce:transform-none">::lucide:play:xl::</span></button></div></div>{% if caption %}<figcaption class="mt-3 text-center text-sm italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ caption }}</figcaption>{% endif %}</figure><script>
(function(){
if(window.__bnVideoFacade)return;window.__bnVideoFacade=true;
function yt(u){var m=u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/);return m?m[1]:null;}
function vim(u){var m=u.match(/vimeo\.com\/(?:video\/)?(\d+)/);return m?m[1]:null;}
document.addEventListener('click',function(e){
var btn=e.target.closest('[data-bn-video-play]');if(!btn)return;
var frame=btn.closest('[data-bn-video]');if(!frame)return;
e.preventDefault();
var url=frame.getAttribute('data-video-url')||'',media=frame.getAttribute('data-video-media')||'',node;
var vstyle='position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:rgba(0,0,0,1);';
if(media){node=document.createElement('video');node.src=media;node.controls=true;node.autoplay=true;node.setAttribute('playsinline','');node.style.cssText=vstyle;}
else{var y=yt(url),v=vim(url),embed;
if(y)embed='https://www.youtube-nocookie.com/embed/'+y+'?autoplay=1&rel=0';
else if(v)embed='https://player.vimeo.com/video/'+v+'?autoplay=1';
if(embed){node=document.createElement('iframe');node.src=embed;node.allow='autoplay; fullscreen; picture-in-picture';node.setAttribute('allowfullscreen','');node.setAttribute('title',btn.getAttribute('aria-label')||'Video');node.style.cssText='position:absolute;inset:0;width:100%;height:100%;border:0;';}
else if(url){node=document.createElement('video');node.src=url;node.controls=true;node.autoplay=true;node.setAttribute('playsinline','');node.style.cssText=vstyle;}
}
if(node){btn.remove();frame.appendChild(node);}
});
})();
</script>{% endwith %}