Thumbnail Video Cards with Play Overlay

<div class="container py-5">
  <h3 class="fw-bold mb-4">Popular this week</h3>
  <div class="row g-4">
    <div class="col-md-6 col-lg-3">
      <a href="https://www.youtube.com/watch?v=eIrMbAQSU34" target="_blank" class="text-decoration-none text-reset">
        <div class="card border-0 shadow-sm overflow-hidden">
          <div class="position-relative">
            <img src="https://img.youtube.com/vi/eIrMbAQSU34/hqdefault.jpg" alt="Bootstrap 5 tutorial thumbnail" class="w-100">
            <span class="position-absolute top-50 start-50 translate-middle bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width:52px;height:52px;">▶</span>
            <span class="position-absolute bottom-0 end-0 m-2 badge bg-dark bg-opacity-75">12:45</span>
          </div>
          <div class="card-body">
            <h6 class="fw-semibold mb-1">Bootstrap 5 in 15 Minutes</h6><small class="text-muted">245K views</small>
          </div>
        </div>
      </a>
    </div>
    <div class="col-md-6 col-lg-3">
      <a href="https://www.youtube.com/watch?v=G3e-cpL7ofc" target="_blank" class="text-decoration-none text-reset">
        <div class="card border-0 shadow-sm overflow-hidden">
          <div class="position-relative">
            <img src="https://img.youtube.com/vi/G3e-cpL7ofc/hqdefault.jpg" alt="HTML tutorial thumbnail" class="w-100">
            <span class="position-absolute top-50 start-50 translate-middle bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width:52px;height:52px;">▶</span>
            <span class="position-absolute bottom-0 end-0 m-2 badge bg-dark bg-opacity-75">1:20:11</span>
          </div>
          <div class="card-body">
            <h6 class="fw-semibold mb-1">HTML Full Course</h6><small class="text-muted">1.2M views</small>
          </div>
        </div>
      </a>
    </div>
    <div class="col-md-6 col-lg-3">
      <a href="https://www.youtube.com/watch?v=OXGznpKZ_sA" target="_blank" class="text-decoration-none text-reset">
        <div class="card border-0 shadow-sm overflow-hidden">
          <div class="position-relative">
            <img src="https://img.youtube.com/vi/OXGznpKZ_sA/hqdefault.jpg" alt="CSS tutorial thumbnail" class="w-100">
            <span class="position-absolute top-50 start-50 translate-middle bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width:52px;height:52px;">▶</span>
            <span class="position-absolute bottom-0 end-0 m-2 badge bg-dark bg-opacity-75">2:26:40</span>
          </div>
          <div class="card-body">
            <h6 class="fw-semibold mb-1">CSS Full Course</h6><small class="text-muted">890K views</small>
          </div>
        </div>
      </a>
    </div>
    <div class="col-md-6 col-lg-3">
      <a href="https://www.youtube.com/watch?v=PkZNo7MFNFg" target="_blank" class="text-decoration-none text-reset">
        <div class="card border-0 shadow-sm overflow-hidden">
          <div class="position-relative">
            <img src="https://img.youtube.com/vi/PkZNo7MFNFg/hqdefault.jpg" alt="JavaScript tutorial thumbnail" class="w-100">
            <span class="position-absolute top-50 start-50 translate-middle bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width:52px;height:52px;">▶</span>
            <span class="position-absolute bottom-0 end-0 m-2 badge bg-dark bg-opacity-75">3:26:42</span>
          </div>
          <div class="card-body">
            <h6 class="fw-semibold mb-1">JavaScript Full Course</h6><small class="text-muted">3.1M views</small>
          </div>
        </div>
      </a>
    </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>