Basic Video Card Grid

<div class="container py-5">
  <div class="text-center mb-4">
    <h2 class="fw-bold">Latest Tutorials</h2>
    <p class="text-muted">Learn web development step by step.</p>
  </div>
  <div class="row g-4">
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/eIrMbAQSU34" title="Bootstrap 5 Crash Course" allowfullscreen></iframe>
        </div>
        <div class="card-body">
          <h5 class="card-title">Bootstrap 5 Crash Course</h5>
          <p class="card-text text-muted small">Get started with the newest Bootstrap in under 60 minutes.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/G3e-cpL7ofc" title="HTML Full Course" allowfullscreen></iframe>
        </div>
        <div class="card-body">
          <h5 class="card-title">HTML Full Course for Beginners</h5>
          <p class="card-text text-muted small">Every tag you need — explained with real examples.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/OXGznpKZ_sA" title="CSS Full Course" allowfullscreen></iframe>
        </div>
        <div class="card-body">
          <h5 class="card-title">CSS Full Course for Beginners</h5>
          <p class="card-text text-muted small">Master selectors, flexbox and grid in one sitting.</p>
        </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>