themes-lcars/templates/overrides/lcars/video-embed.ninjatpl
Alex Dunmow d2d27b8dd9 fix(lcars): seed hero+cover art, styled empty-media fallback, SVG geometry guard + shortcode sweep, longer episode log
- seed: wire 6 licensed cosmic images (hero split art, episode cover, episode-card + about slots); kills the empty grey hero/cover boxes with real art
- theme fix: rich-section + episode_console render a labeled LCARS console-art readout for unset image slots instead of a bare grey rectangle
- dead space: home hero -> split layout (image fills post-CTA void); lengthen first-contact episode log to ~11 paragraphs (starfleet-log voice), warp/terraforming to 5
- SVG geometry guard: explicit width/height on all <use> icon SVGs; full shortcode sweep (::pack:name:size:: -> sized <svg><use>) across every override

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-06 19:35:15 +08:00

12 lines
1.7 KiB
Plaintext

{# video-embed override — click-to-load facade; carries data-bn-video / data-video-url / data-video-media so the host facade JS binds. #}
{% if aspect == "4:3" %}{% set vratio = "4 / 3" %}{% elif aspect == "1:1" %}{% set vratio = "1 / 1" %}{% elif aspect == "21:9" %}{% set vratio = "21 / 9" %}{% else %}{% set vratio = "16 / 9" %}{% endif %}
<figure class="{{ class }}" style="margin:2rem 0;">
<div class="lcars-video-frame" data-bn-video data-video-url="{{ url|default:'' }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}" style="position:relative;width:100%;overflow:hidden;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--muted));aspect-ratio:{{ vratio }};">
<button type="button" data-bn-video-play class="lcars-video-play" aria-label="Play video{% if title %}: {{ title }}{% endif %}" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;background:none;cursor:pointer;">
{% if poster %}{% img poster alt=title|default:"" class="lcars-video-poster" %}{% endif %}
<span class="lcars-video-play-badge" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:4px;background:hsl(var(--accent));color:hsl(var(--accent-foreground));"><svg width="28" height="28" class="lcars-inline-icon" aria-hidden="true"><use href="/icons/lucide.svg#play"/></svg></span>
</button>
</div>
{% if caption %}<figcaption class="lcars-stat-label" style="margin-top:0.5rem;text-align:center;">{{ caption }}</figcaption>{% endif %}
</figure><style>.lcars-video-frame .lcars-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}</style>