video-modal

Summary

A circular play button in the hero that — via Bootstrap's modal trigger — opens a modal-xl lightbox with an embedded YouTube iframe set to autoplay. The trigger is the .request-loader ripple component; the modal is hidden until clicked.

HTML structure (minimal)

<!-- Trigger (visible in hero) -->
<button type="button" class="request-loader"
        data-bs-toggle="modal" data-bs-target="#videoModal">
  <i class="fa-solid fa-play ms-1"></i>
</button>

<!-- Modal (hidden until trigger fires) -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content bg-dark-color">
      <iframe class="ifr-video"
              src="https://www.youtube.com/embed/FK2RaJ1EfA8?autoplay=1"></iframe>
    </div>
  </div>
</div>

Key SCSS tokens

.request-loader {
  position: relative;
  height: 70px;
  border-radius: 50% !important;
  border: 1px solid var(--accent-color-2);
  background: transparent;
  color: var(--accent-color-2);
  font-size: 25px;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.request-loader::after,
.request-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid currentColor;
  border-radius: 50%;
  opacity: .2;
  animation: ripple infinite cubic-bezier(.65,0,.34,1);
}
.request-loader::before { animation-delay: .2s; animation-duration: 3s; }
.request-loader::after  { animation-delay: .5s; animation-duration: 3s; }

@keyframes ripple {
  from { opacity: 1; transform: scale3d(1,1,1);     border-width: 0; }
  to   { opacity: 0; transform: scale3d(1.7,1.7,1.8); border-width: 13px; }
}

Animation logic

// Bootstrap handles modal open/close via data-bs-toggle="modal".
// No custom JS needed — including bootstrap.bundle.min.js is enough.
// The YouTube iframe autoplays via ?autoplay=1 in the embed URL.

Notable details

• The play button itself is a small piece of art: two pseudo-element rings widen and fade simultaneously with offset delays, producing a clean concentric ripple. The border-width itself animates (0 → 13px), which thickens the ring as it expands — softer than a pure transform: scale ripple.
• Modal uses modal-xl and modal-dialog-centered so the iframe lands roughly 16:9 inside a vertically-centered dialog on desktop.
• Autoplay relies on the YouTube ?autoplay=1 query param — works as long as the embed isn't muted-required by the browser policy.

Use when

• Any "play our story" button on a hero where you want decoration around the button and the video loaded only when clicked.
• Service / agency / law sites that want a quick way to surface a brand video without building a custom lightbox.

Caveats

• The modal is hidden initially (display: none), so the screenshot pipeline cannot capture its open state — the selector points at the trigger button. The full modal with the playing iframe will not render in component screenshots.
• Mobile browsers (especially iOS) refuse to autoplay video with audio; the iframe will start paused on iPhone.
• The iframe stays mounted after the modal closes unless you script it to reset — so the video keeps playing in the background. Add JS to clear src on hidden.bs.modal if that matters.