Video Hero Card

<div class="container py-5">
  <div class="card border-0 shadow-lg overflow-hidden bg-dark text-white">
    <div class="row g-0 align-items-center">
      <div class="col-lg-6 p-4 p-lg-5">
        <span class="badge bg-warning text-dark mb-3">New Course</span>
        <h2 class="fw-bold mb-3">Master Bootstrap 5 in One Weekend</h2>
        <p class="text-white-50 mb-4">Watch our free intro video and unlock 40+ hands-on lessons — from utility classes to complete website layouts.</p>
        <div class="d-flex gap-2">
          <a href="#" class="btn btn-warning">Start Watching</a>
          <a href="#" class="btn btn-outline-light">See Curriculum</a>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/4sosXZsdy-s" title="Bootstrap course intro" allowfullscreen></iframe></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>