Featured Video with Playlist

<div class="container py-5">
  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/PkZNo7MFNFg" title="JavaScript Full Course" allowfullscreen></iframe>
        </div>
        <div class="card-body">
          <span class="badge bg-danger mb-2">Featured</span>
          <h4 class="fw-bold mb-1">JavaScript Full Course for Beginners</h4>
          <p class="text-muted mb-0">4 hours · Learn variables, functions, DOM and fetch API from scratch.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="list-group shadow-sm">
        <div class="list-group-item d-flex gap-3 align-items-center">
          <img src="https://img.youtube.com/vi/hdI2bqOjy3c/mqdefault.jpg" alt="JavaScript basics tutorial thumbnail" class="rounded" width="120">
          <div>
            <h6 class="mb-1">JavaScript Basics</h6><small class="text-muted">12:45</small>
          </div>
        </div>
        <div class="list-group-item d-flex gap-3 align-items-center">
          <img src="https://img.youtube.com/vi/W6NZfCO5SIk/mqdefault.jpg" alt="JavaScript in 12 minutes tutorial thumbnail" class="rounded" width="120">
          <div>
            <h6 class="mb-1">JavaScript in 12 Minutes</h6><small class="text-muted">12:00</small>
          </div>
        </div>
        <div class="list-group-item d-flex gap-3 align-items-center">
          <img src="https://img.youtube.com/vi/Ukg_U3CnJWI/mqdefault.jpg" alt="JavaScript full course thumbnail" class="rounded" width="120">
          <div>
            <h6 class="mb-1">JS Objects Explained</h6><small class="text-muted">18:22</small>
          </div>
        </div>
        <div class="list-group-item d-flex gap-3 align-items-center">
          <img src="https://img.youtube.com/vi/DHvZLI7Db8E/mqdefault.jpg" alt="Async JavaScript tutorial thumbnail" class="rounded" width="120">
          <div>
            <h6 class="mb-1">Async & Await</h6><small class="text-muted">14:07</small>
          </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>