A big featured YouTube player on the left and a scrollable list of upcoming videos on the right.
Live preview
Source code
html
<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>
How to use this video cards
Add it to your project in three steps
Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.
The Featured Video with Playlist block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.
Accessibility checklist
Ship it accessible by default
Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
Give every image an alt attribute (empty alt="" if it's decorative).
Label icon-only buttons with aria-label and keep focus outlines visible.
Maintain a contrast ratio of at least 4.5:1 for body text against its background.
Test the video cards with Tab / Shift+Tab and Enter — every interactive element should be reachable.
Step-by-step customisation
Make it match your brand
Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.
About the Featured Video with Playlist video cards
This video cards is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.
If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.
Detailed Technical Breakdown
Detailed Technical Breakdown: Featured Video with Playlist
Browser compatibility & standards
The Featured Video with Playlist video cards is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this video cards to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.
Performance impact
Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap video cards is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.
Utility classes used
The video cards leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire video cards by overriding a handful of CSS variables at the :root level — no Sass recompile required.
Exact customisation steps
Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the video cards sits on the Bootstrap grid.
Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.
Technical & Performance Integration Guide
Technical & Performance Integration Guide — Featured Video with Playlist (video block)
When and why to use this video block
Embedded video is the single biggest third-party performance cost on most pages. A standard YouTube iframe pulls in roughly 500 KB–1 MB of JavaScript before the visitor has even pressed play, so the way you embed matters more than the player you choose.
Accessibility & ARIA attributes
Give every iframe a meaningful title attribute ("Bootstrap grid tutorial video") — screen readers read it as the frame's accessible name, and an untitled frame is announced only as "frame". Provide captions or a transcript below the player; captions are a WCAG Level A requirement, not an optional extra. Never autoplay with sound, and honour prefers-reduced-motion for any decorative background video.
Performance notes for this pattern
Wrap the iframe in Bootstrap's .ratio.ratio-16x9 so the player reserves its box before the network responds, keeping CLS at zero. Add loading="lazy" to the iframe, and for the best result use the facade pattern: render the poster thumbnail plus a play button, then swap in the real iframe on first click. That single change routinely improves mobile Lighthouse Performance by 20–30 points on video-heavy pages.
Three customisation tricks
Use the youtube-nocookie.com host so no tracking cookie is set until the visitor plays the video — helpful for consent compliance.
Accept any YouTube URL form (watch?v=, youtu.be/, /embed/, /shorts/) and normalise it to the embed path in one small helper.
Add allowfullscreen and the standard allow attribute list so picture-in-picture and fullscreen keep working.
Mistakes to avoid
Pasting a watch?v= URL straight into src, which YouTube refuses to frame.
Fixed pixel heights that letterbox the player on mobile.