Video Card with Author & Badge

<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100 overflow-hidden">
        <div class="position-relative">
          <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/Ke90Tje7VS0" title="React tutorial" allowfullscreen></iframe></div>
          <span class="position-absolute top-0 start-0 m-2 badge bg-primary">React</span>
        </div>
        <div class="card-body">
          <h5 class="card-title mb-2">React JS for Beginners</h5>
          <div class="d-flex align-items-center gap-2">
            <img src="https://i.pravatar.cc/40?img=12" alt="Author avatar for Rahim" class="rounded-circle" width="32" height="32">
            <div class="small">
              <div class="fw-semibold">Rahim Uddin</div>
              <div class="text-muted">128K views · 3 days ago</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100 overflow-hidden">
        <div class="position-relative">
          <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/dGcsHMXbSOA" title="Tailwind CSS tutorial" allowfullscreen></iframe></div>
          <span class="position-absolute top-0 start-0 m-2 badge bg-success">Tailwind</span>
        </div>
        <div class="card-body">
          <h5 class="card-title mb-2">Tailwind CSS in 20 Minutes</h5>
          <div class="d-flex align-items-center gap-2">
            <img src="https://i.pravatar.cc/40?img=32" alt="Author avatar for Farhana" class="rounded-circle" width="32" height="32">
            <div class="small">
              <div class="fw-semibold">Farhana Akter</div>
              <div class="text-muted">54K views · 1 week ago</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100 overflow-hidden">
        <div class="position-relative">
          <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/rfscVS0vtbw" title="Python tutorial" allowfullscreen></iframe></div>
          <span class="position-absolute top-0 start-0 m-2 badge bg-warning text-dark">Python</span>
        </div>
        <div class="card-body">
          <h5 class="card-title mb-2">Python Complete Beginner Guide</h5>
          <div class="d-flex align-items-center gap-2">
            <img src="https://i.pravatar.cc/40?img=15" alt="Author avatar for Nayeem" class="rounded-circle" width="32" height="32">
            <div class="small">
              <div class="fw-semibold">Nayeem Hasan</div>
              <div class="text-muted">312K views · 2 weeks ago</div>
            </div>
          </div>
        </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>