video-cta-with-pulse

Summary

Full-bleed dark photo background with a 30% black overlay, centred white headline, and a circular play button surrounded by three staggered pulsing rings. Click opens a YouTube video in a Fancybox modal. The background photo parallax-scrolls relative to the section.

HTML structure (minimal)

<section class="video-section centred">
  <div class="bg-layer parallax-bg"
       data-parallax='{"y": 100}'
       style="background-image: url(video-bg.jpg);"></div>
  <div class="auto-container">
    <div class="content-box">
      <h2>Trusted By 17k+ Worldwide<br>Brand &amp; Customers</h2>
      <div class="video-btn">
        <a href="https://www.youtube.com/watch?v=…" class="lightbox-image">
          <i class="icon-6"></i>
          <span class="border-animation"></span>
          <span class="border-animation border-1"></span>
          <span class="border-animation border-2"></span>
          <span class="border-animation border-3"></span>
        </a>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.video-section { padding: 182px 0px 190px 0px; overflow: hidden; }
.video-section .bg-layer::before {
  content: ''; position: absolute; inset: 0;
  background: #000; opacity: 0.3;
}
.video-section .video-btn a {
  position: relative; display: inline-block;
  width: 120px; height: 120px;
  border: 1px solid #fff; border-radius: 50%;
  font-size: 24px; color: #fff;
}

.border-animation {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: squares 2.9s linear 0s infinite;
}
.border-animation.border-2 { animation-delay: 1s; }
.border-animation.border-3 { animation-delay: 2s; }

.parallax-bg {
  position: absolute; left: 0; top: -30%;
  width: 100%; height: calc(100% + 30%);
  background-size: cover; background-position: center;
}

Animation logic

// Lightbox opens YouTube in a Fancybox modal.
$('.lightbox-image').fancybox({
  openEffect: 'fade',
  closeEffect: 'fade',
  helpers: { media: {} }
});

// Parallax driven by data-parallax='{"y": 100}' via parallax-scroll.js.

Notable details

• Three border-animation siblings share a 2.9s squares keyframe with 0/1/2 second delays, so a new ring is always being emitted while the previous one fades — no JS needed.
• Parallax is the lightweight parallax-scroll.js plugin (not Locomotive or Lenis); JSON config on data-parallax.
• The bg-layer is taller than the section (height: calc(100% + 30%)) and offset to top: -30% so the parallax never reveals empty space.

Use when

• Marketing pages that want a video testimonial or product demo without building a video player.
• Sections that need to feel cinematic but stay performant — a JPG plus modal is way cheaper than autoplaying video.

Caveats

• Fancybox is GPL/Commercial dual-licensed; a commercial site using it should check licensing.
• Parallax-scroll.js doesn't respect prefers-reduced-motion out of the box.
• The pulse rings render at the play button's exact size, so resizing the button changes the ring size — keep them coupled.