Video Testimonial Card

<div class="container py-5">
  <div class="row g-4 align-items-center bg-light p-4 rounded-4">
    <div class="col-md-6">
      <div class="position-relative rounded-4 overflow-hidden ratio ratio-16x9"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=800&h=450&fit=crop" alt="Student testimonial video preview" class="w-100 h-100" style="object-fit:cover"><button class="btn btn-danger position-absolute top-50 start-50 translate-middle rounded-circle" style="width:72px;height:72px"><i class="bi bi-play-fill fs-3"></i></button></div>
    </div>
    <div class="col-md-6">
      <h3 class="fw-bold">"CodeShikhi changed my life"</h3>
      <p class="text-muted">Watch how Ahsan went from zero to freelancing in 6 months, using only free tutorials from CodeShikhi.</p>
      <div class="d-flex align-items-center gap-3"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop" alt="Ahsan portrait" class="rounded-circle" style="width:56px;height:56px;object-fit:cover">
        <div>
          <div class="fw-bold">Ahsan Habib</div><small class="text-muted">Freelance Developer, Dhaka</small>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  /*__yt_norm__*/
  (function() {
    function norm(u) {
      try {
        var m = String(u).match(/(?:v=|youtu\.be\/|\/embed\/|\/shorts\/|\/live\/)([\w-]{11})/);
        return m ? ("https://www.youtube.com/embed/" + m[1]) : u;
      } catch (e) {
        return u;
      }
    }
    document.querySelectorAll("iframe").forEach(function(f) {
      var s = f.getAttribute("data-yt") || f.getAttribute("src") || "";
      if (!s) return;
      var n = norm(s);
      if (n && n !== f.src) f.src = n;
    });
  })();

</script>