Sidebar Related Video Card v2026-06-16
Standalone white video card for the sidebar - NO 'Related Video' eyebrow, YouTube-red rounded-rectangle play button, centered title and meta. The thumbnail degrades to a clean navy gradient if the image is missing (no broken-image icon in preview). Matches the other white sidebar cards.
Source skill: sa-sidebar-related-video · Updated 2026-06-16 13:47:51
When to use
Secondary after-trust block on any page that has a relevant brand/YouTube video. Drop in the video URL, thumbnail, title and meta.
Rules & constraints
- All sidebar cards are white (#fff, 1px rgba(11,33,45,.12) border, 8px radius). Trust card uses a 4px Foundry #D97706 left border (radius 0 8px 8px 0). The only dark gradient left in the sidebar is the form Submit button. Orange is ONLY Foundry #D97706 — legacy #F89C22 is banned. CTA headline (frozen): 'Focus On Healing.' / 'We'll Handle The Rest.' Subline: 'Get Back To Living Your Best Life'. Button text 'CALL NOW' (phone in tel: href only). Form submit 'GET STARTED'. Trust item 3 reads 'Average Settlement Timeline Under 7 Months'. Checkmarks are ✓ entities. Two font variants ship in the same skill: Poppins (default, 22px CTA headline) and Georgia/Times serif (19px CTA headline) — serif is the approved exception to sa-copywriting §12 no-serif rule for this component family only.
- Video play affordances must use YouTube red (#FF0000 resting, #CC0000 hover) with a rounded-rectangle YouTube-style button, not a large orange circle.
Live reference
Deployment notes
Two font variants. Poppins (default, CTA headline 22px) shown in the HTML field. Serif variant (Georgia/Times, CTA headline 19px) is in the source skill (sa-sidebar-related-video) references. Production blocks: blocks/related-video-poppins.html and blocks/related-video-serif.html. WordPress-deployable, scoped CSS, no global leak. Source skill: sa-sidebar-related-video.
HTML
<!-- wp:html -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
.sa-sidebar-rvid-poppins *{box-sizing:border-box;font-family:Poppins, sans-serif;}
.sa-sidebar-rvid-poppins{background:#fff;border:1px solid rgba(11,33,45,.12);border-radius:8px;padding:24px 22px;box-shadow:0 4px 14px rgba(0,0,0,0.06);}
.sa-sidebar-rvid-poppins .rvid-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#13303f 0%,#0B212D 100%);text-decoration:none;}
.sa-sidebar-rvid-poppins .rvid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sa-sidebar-rvid-poppins .rvid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:#FF0000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .2s ease;}
.sa-sidebar-rvid-poppins .rvid-thumb:hover .rvid-play{background:#CC0000;}
.sa-sidebar-rvid-poppins .rvid-play svg{width:30px;height:30px;margin-left:3px;}
.sa-sidebar-rvid-poppins .rvid-title{font-weight:700;font-size:18px;line-height:1.3;color:#0B212D;text-align:center;margin:16px 0 6px;text-transform:uppercase;}
.sa-sidebar-rvid-poppins .rvid-meta{font-weight:500;font-size:15px;color:#0B212D;opacity:.7;text-align:center;margin:0;}
</style>
<aside class="sa-sidebar-rvid-poppins">
<a class="rvid-thumb" href="VIDEO_URL" aria-label="Play video">
<img src="THUMBNAIL_URL" alt="" loading="lazy" onerror="this.style.display='none'">
<span class="rvid-play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg></span>
</a>
<p class="rvid-title">What Makes Us Different</p>
<p class="rvid-meta">2:14 · 12K views</p>
</aside>
<!-- /wp:html -->