---
id: seed:archetypes/video-section
title: Video section archetypes
source_type: seed_archetype
priority: warm
---

A video section leverages motion and sound to create emotional impact. It converts on engagement and story — a video can communicate in seconds what paragraphs take minutes. Use when you have compelling video content that deserves prominence. Four working archetypes:

---

**Play button overlay (default).** Thumbnail with prominent play button. Click opens modal or plays inline.

*Animation & Visual Details:*
- *Entrance*: Thumbnail fades in with scale 0.95 → 1; play button pulses in with radial ring
- *Hover*: Play button scales to 1.1 with intensified glow; thumbnail zooms to 1.03
- *Gradients*: Overlay gradient from transparent to rgba(0,0,0,0.4) at bottom
- *Radial circles*: Radial pulse on play button (accent color at 20% opacity)
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: Click opens video modal or toggles inline play

```html
<section data-amb-section="video" class="video-section">
  <div class="container">
    <div class="video-header">
      <h2 class="video-title">See it in action</h2>
      <p class="video-subtitle">Watch how our platform transforms workflows</p>
    </div>
    <div class="video-wrapper">
      <button class="video-thumbnail" id="video-thumbnail" aria-label="Play video">
        <img class="video-thumbnail-image" src="https://placehold.co/1200x675/1e293b/6366f1?text=Video+Thumbnail" alt="Video thumbnail" />
        <div class="video-overlay">
          <div class="video-play-btn">
            <div class="video-play-btn-ring"></div>
            <svg class="video-play-icon" viewBox="0 0 24 24" fill="currentColor">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
          </div>
        </div>
        <div class="video-duration">2:34</div>
      </button>
    </div>
  </div>
</section>

<div class="video-modal" id="video-modal" aria-hidden="true">
  <div class="video-modal-backdrop"></div>
  <div class="video-modal-content">
    <button class="video-modal-close" aria-label="Close video">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
    <div class="video-modal-video-wrapper">
      <iframe class="video-modal-iframe" src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
  </div>
</div>
```

```css
:root {
  --video-enter-duration: 0.6s;
}

.video-section {
  padding: clamp(64px, 8vw, 100px) 0;
}

.video-header {
  text-align: center;
  max-width: 480px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

.video-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.video-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 12px;
}

.video-wrapper {
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--video-enter-duration) ease, transform var(--video-enter-duration) ease;
}

.video-wrapper.is-visible {
  opacity: 1;
  transform: scale(1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  border: none;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.video-thumbnail-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.video-thumbnail:hover .video-thumbnail-image {
  transform: scale(1.03);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play-btn {
  position: relative;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.video-play-btn-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .video-play-btn-ring {
  opacity: 1;
  animation: video-ring-pulse 2s ease-in-out infinite;
}

@keyframes video-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.video-thumbnail:hover .video-play-btn {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(99,102,241,0.3);
}

.video-play-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent, #6366f1);
  margin-left: 4px;
}

.video-duration {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
}

.video-modal-video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-modal.is-open .video-modal-video-wrapper {
  transform: scale(1);
}

.video-modal-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(255,255,255,0.2);
  transform: rotate(90deg);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .video-wrapper {
    opacity: 1;
    transform: none;
  }
  .video-play-btn-ring {
    animation: none;
  }
  .video-modal-video-wrapper {
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const thumbnail = document.getElementById('video-thumbnail');
const modal = document.getElementById('video-modal');
const iframe = modal.querySelector('.video-modal-iframe');
const closeBtn = modal.querySelector('.video-modal-close');
const wrapper = document.querySelector('.video-wrapper');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      wrapper.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });
observer.observe(wrapper);

thumbnail.addEventListener('click', () => {
  iframe.src = 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1';
  modal.classList.add('is-open');
  modal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
});

function closeModal() {
  modal.classList.remove('is-open');
  modal.setAttribute('aria-hidden', 'true');
  iframe.src = '';
  document.body.style.overflow = '';
}

closeBtn.addEventListener('click', closeModal);
modal.querySelector('.video-modal-backdrop').addEventListener('click', closeModal);
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
});
```

---

**Background video with overlay.** Full-width or contained video plays silently in background with overlay text.

*Animation & Visual Details:*
- *Entrance*: Content fades in with stagger (0.1s between elements) after video loads
- *Hover*: Video controls appear on hover (if controls enabled)
- *Gradients*: Overlay has gradient from rgba(0,0,0,0.7) to transparent for text readability
- *Radial circles*: Subtle radial gradient in center for depth
- *Scroll trigger*: Not applicable (video plays automatically)
- *JS interaction*: Video autoplay (muted), optional play/pause toggle

```html
<section data-amb-section="video" class="video-section video-section--bg">
  <div class="video-bg-wrapper">
    <video class="video-bg-video" autoplay muted loop playsinline>
      <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
    </video>
    <div class="video-bg-overlay"></div>
  </div>
  <div class="container">
    <div class="video-bg-content">
      <span class="video-bg-eyebrow">Product demo</span>
      <h2 class="video-bg-title">See how it works</h2>
      <p class="video-bg-desc">Watch the full workflow in under 3 minutes</p>
      <button class="video-bg-play" id="video-bg-play" aria-label="Pause video">
        <svg class="video-bg-pause-icon" viewBox="0 0 24 24" fill="currentColor">
          <rect x="6" y="4" width="4" height="16"/>
          <rect x="14" y="4" width="4" height="16"/>
        </svg>
        <svg class="video-bg-play-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none;">
          <polygon points="5 3 19 12 5 21 5 3"/>
        </svg>
      </button>
    </div>
  </div>
</section>
```

```css
.video-section--bg {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.video-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.video-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.85) 0%,
    rgba(30, 41, 59, 0.6) 50%,
    rgba(99, 102, 241, 0.3) 100%
  );
}

.video-bg-overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.video-bg-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 24px;
}

.video-bg-eyebrow {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(99,102,241,0.2);
  border: 1px solid rgba(99,102,241,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 24px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: video-content-enter 0.5s ease-out 0.2s forwards;
}

.video-bg-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(20px);
  animation: video-content-enter 0.5s ease-out 0.3s forwards;
}

.video-bg-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  animation: video-content-enter 0.5s ease-out 0.4s forwards;
}

@keyframes video-content-enter {
  to { opacity: 1; transform: translateY(0); }
}

.video-bg-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
  animation: video-content-enter 0.5s ease-out 0.5s forwards;
}

.video-bg-play:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.1);
}

.video-bg-play svg {
  width: 24px;
  height: 24px;
}

.video-bg-play.paused .video-bg-pause-icon {
  display: none;
}

.video-bg-play.paused .video-bg-play-icon {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .video-bg-eyebrow,
  .video-bg-title,
  .video-bg-desc,
  .video-bg-play {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .video-bg-video {
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const video = document.querySelector('.video-bg-video');
const playBtn = document.getElementById('video-bg-play');

playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playBtn.classList.remove('paused');
    playBtn.setAttribute('aria-label', 'Pause video');
  } else {
    video.pause();
    playBtn.classList.add('paused');
    playBtn.setAttribute('aria-label', 'Play video');
  }
});
```

---

**Multiple video thumbnails.** Grid of short video clips in cards. Click plays in modal.

*Animation & Visual Details:*
- *Entrance*: Cards fade in with stagger (0.08s), scale 0.9 → 1
- *Hover*: Card lifts with shadow, play button scales up
- *Gradients*: Video overlay has gradient from transparent to rgba(0,0,0,0.5)
- *Radial circles*: Play button has radial glow on hover
- *Scroll trigger*: IntersectionObserver at 10% threshold
- *JS interaction*: Click opens modal with selected video

```html
<section data-amb-section="video" class="video-section video-section--grid">
  <div class="container">
    <h2 class="video-title">Watch more demos</h2>
    <div class="video-grid">
      <button class="video-card" data-video-id="dQw4w9WgXcQ" aria-label="Play Analytics dashboard demo">
        <div class="video-card-media">
          <img class="video-card-thumb" src="https://placehold.co/400x225/1e293b/6366f1?text=Analytics" alt="Analytics dashboard" />
          <div class="video-card-overlay">
            <div class="video-card-play">
              <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            </div>
          </div>
          <span class="video-card-duration">1:45</span>
        </div>
        <h3 class="video-card-title">Analytics dashboard</h3>
        <p class="video-card-desc">Real-time metrics and reporting</p>
      </button>
      <button class="video-card" data-video-id="dQw4w9WgXcQ" aria-label="Play Team collaboration demo">
        <div class="video-card-media">
          <img class="video-card-thumb" src="https://placehold.co/400x225/1e293b/6366f1?text=Collaboration" alt="Team collaboration" />
          <div class="video-card-overlay">
            <div class="video-card-play">
              <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            </div>
          </div>
          <span class="video-card-duration">2:12</span>
        </div>
        <h3 class="video-card-title">Team collaboration</h3>
        <p class="video-card-desc">Work together in real-time</p>
      </button>
      <button class="video-card" data-video-id="dQw4w9WgXcQ" aria-label="Play Automation workflows demo">
        <div class="video-card-media">
          <img class="video-card-thumb" src="https://placehold.co/400x225/1e293b/6366f1?text=Automation" alt="Automation workflows" />
          <div class="video-card-overlay">
            <div class="video-card-play">
              <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            </div>
          </div>
          <span class="video-card-duration">1:58</span>
        </div>
        <h3 class="video-card-title">Automation workflows</h3>
        <p class="video-card-desc">Save hours with smart automations</p>
      </button>
    </div>
  </div>
</section>
```

```css
.video-section--grid {
  background: var(--color-bg-alt, #f8fafc);
}

.video-section--grid .video-title {
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 40px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.video-card {
  background: #fff;
  border-radius: 16px;
  padding: 0;
  border: none;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: scale(0.9);
}

.video-card.is-visible {
  animation: video-card-enter 0.5s ease-out forwards;
}

.video-card:nth-child(1).is-visible { animation-delay: 0s; }
.video-card:nth-child(2).is-visible { animation-delay: 0.08s; }
.video-card:nth-child(3).is-visible { animation-delay: 0.16s; }

@keyframes video-card-enter {
  to { opacity: 1; transform: scale(1); }
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.video-card-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-card:hover .video-card-thumb {
  transform: scale(1.05);
}

.video-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-card-play {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card-play::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .video-card-play {
  transform: scale(1.15);
}

.video-card:hover .video-card-play::before {
  opacity: 1;
}

.video-card-play svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
  margin-left: 2px;
}

.video-card-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
}

.video-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  padding: 16px 16px 4px;
  margin: 0;
}

.video-card-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  padding: 0 16px 16px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-card {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const videoCards = document.querySelectorAll('.video-card');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });
videoCards.forEach(card => observer.observe(card));

videoCards.forEach(card => {
  card.addEventListener('click', () => {
    const videoId = card.dataset.videoId;
    const modal = document.getElementById('video-modal') || createVideoModal();
    const iframe = modal.querySelector('.video-modal-iframe');
    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.classList.add('is-open');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
  });
});

function createVideoModal() {
  const modal = document.createElement('div');
  modal.id = 'video-modal';
  modal.className = 'video-modal';
  modal.setAttribute('aria-hidden', 'true');
  modal.innerHTML = `
    <div class="video-modal-backdrop"></div>
    <div class="video-modal-content">
      <button class="video-modal-close" aria-label="Close video">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
      <div class="video-modal-video-wrapper">
        <iframe class="video-modal-iframe" src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
    </div>
  `;
  document.body.appendChild(modal);

  modal.querySelector('.video-modal-close').addEventListener('click', () => closeModal());
  modal.querySelector('.video-modal-backdrop').addEventListener('click', () => closeModal());
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
  });

  return modal;

  function closeModal() {
    modal.classList.remove('is-open');
    modal.setAttribute('aria-hidden', 'true');
    modal.querySelector('.video-modal-iframe').src = '';
    document.body.style.overflow = '';
  }
}
```

---

**Sticky scroll video.** Video sticks while content scrolls alongside it.

*Animation & Visual Details:*
- *Entrance*: Video fades in first; content items stagger in from right
- *Scroll*: Video section is position: sticky; content scrolls past it
- *Gradients*: Content sections have alternating gradient backgrounds
- *Radial circles*: Video container has subtle radial glow
- *Scroll trigger*: Not applicable (sticky scroll)
- *JS interaction*: None beyond sticky behavior (CSS handles sticky positioning)

```html
<section data-amb-section="video" class="video-section video-section--sticky">
  <div class="video-sticky-wrapper">
    <div class="video-sticky-video">
      <div class="video-sticky-media">
        <img src="https://placehold.co/800x600/1e293b/6366f1?text=Product+Demo" alt="Product demo" />
        <button class="video-sticky-play" aria-label="Play video">
          <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        </button>
      </div>
    </div>
    <div class="video-sticky-content">
      <div class="video-sticky-item">
        <h3 class="video-sticky-title">Automated workflows</h3>
        <p class="video-sticky-text">Set up complex automations with our visual builder. Connect your favorite tools and let the work run itself.</p>
      </div>
      <div class="video-sticky-item">
        <h3 class="video-sticky-title">Real-time analytics</h3>
        <p class="video-sticky-text">See exactly what's happening across your workspace. Customizable dashboards update as events occur.</p>
      </div>
      <div class="video-sticky-item">
        <h3 class="video-sticky-title">Team collaboration</h3>
        <p class="video-sticky-text">Work together seamlessly with shared workspaces, comments, and real-time editing.</p>
      </div>
    </div>
  </div>
</section>
```

```css
.video-section--sticky {
  background: var(--color-bg-alt, #f8fafc);
}

.video-sticky-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 100px) 24px;
}

@media (max-width: 768px) {
  .video-sticky-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.video-sticky-video {
  position: sticky;
  top: 80px;
  height: fit-content;
}

@media (max-width: 768px) {
  .video-sticky-video {
    position: static;
  }
}

.video-sticky-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}

.video-sticky-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.video-sticky-media img {
  width: 100%;
  height: auto;
  display: block;
}

.video-sticky-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.video-sticky-play::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-sticky-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-sticky-play:hover::before {
  opacity: 1;
}

.video-sticky-play svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent, #6366f1);
  margin-left: 3px;
}

.video-sticky-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.video-sticky-item {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.video-sticky-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.video-sticky-item:nth-child(1).is-visible { transition-delay: 0.1s; }
.video-sticky-item:nth-child(2).is-visible { transition-delay: 0.2s; }
.video-sticky-item:nth-child(3).is-visible { transition-delay: 0.3s; }

.video-sticky-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 12px;
}

.video-sticky-text {
  font-size: 1rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-sticky-item {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const stickyItems = document.querySelectorAll('.video-sticky-item');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });
stickyItems.forEach(item => observer.observe(item));
```

---

Copy rules: video thumbnails must be high-quality stills (not blurry placeholder frames). Duration labels set expectations. If the video is longer than 2 minutes, consider showing a shorter clip in the thumbnail or providing chapter markers.

Layout rules: hero video autoplays (muted) and should be above the fold. Section videos should be accompanied by enough context that the visitor knows what they'll learn. Autoplay backgrounds work best when the video is short and loops seamlessly.

CSS custom property summary:
```css
:root {
  --video-enter-duration: 0.6s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```