Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Video Gallery
videoDisplays a primary video player accompanied by a selectable gallery or playlist of other video content.
VIDEO SERIES
Explore Our Video Library
Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.
Up Next
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{
currentVideoUrl: 'https://www.youtube.com/embed/__NeP0RqACU?autoplay=0&rel=0',
currentVideoTitle: 'Introduction to SenangStart',
videos: [
{ id: 1, title: 'Introduction to SenangStart', duration: '5:30', url: 'https://www.youtube.com/embed/__NeP0RqACU?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/3B82F6/FFFFFF?text=Vid1' },
{ id: 2, title: 'Advanced Features Tutorial', duration: '12:15', url: 'https://www.youtube.com/embed/YgGzAKP_HuM?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid2' },
{ id: 3, title: 'Client Success: Acme Corp', duration: '8:42', url: 'https://www.youtube.com/embed/L_LUpnjgPso?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid3' },
{ id: 4, title: 'Webinar: Future of Web Design', duration: '45:10', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid4' }
],
playVideo(video) {
this.currentVideoUrl = video.url;
this.currentVideoTitle = video.title;
}
}">
<div class="text-left mb-10 lg:mb-16">
<div class="mb-3 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600">
<p class="text-sm font-bold uppercase tracking-wider">VIDEO SERIES</p>
</div>
<h2 class="text-3xl lg:text-6xl font-bold capitalize mb-4">
Explore Our Video Library
</h2>
<p class="text-lg lg:text-xl max-w-3xl text-neutral-700">
Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Main Video Player -->
<div class="lg:col-span-8">
<div class="bg-neutral-200 rounded-xl overflow-hidden aspect-video shadow-2xl mb-3">
<iframe :src="currentVideoUrl" title="Main YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="w-full h-full"></iframe>
</div>
<div class="p-4 bg-neutral-100 rounded-lg shadow">
<h3 x-text="currentVideoTitle" class="text-xl lg:text-2xl font-semibold text-neutral-800"></h3>
</div>
</div>
<!-- Playlist -->
<div class="lg:col-span-4">
<h3 class="text-2xl font-semibold mb-5 text-neutral-800">Up Next</h3>
<div class="space-y-3 max-h-[400px] lg:max-h-[calc(100vh-250px)] overflow-y-auto pr-2 custom-scrollbar">
<template x-for="video in videos" :key="video.id">
<div
@click="playVideo(video)"
class="flex items-center gap-4 p-3 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg"
:class="currentVideoTitle === video.title ? 'bg-blue-100 border-2 border-blue-500 shadow-md' : 'bg-white hover:bg-neutral-50 border'">
<img :src="video.thumb" :alt="video.title + ' Thumbnail'" class="w-28 h-[70px] object-cover rounded-md flex-shrink-0">
<div class="overflow-hidden">
<h4 class="font-semibold truncate" :class="currentVideoTitle === video.title ? 'text-blue-700' : 'text-neutral-800'" x-text="video.title"></h4>
<p class="text-sm" :class="currentVideoTitle === video.title ? 'text-blue-600' : 'text-neutral-500'" x-text="video.duration"></p>
</div>
<i class="fas fa-play-circle text-2xl ml-auto" :class="currentVideoTitle === video.title ? 'text-blue-500' : 'text-neutral-400'"></i>
</div>
</template>
</div>
</div>
</div>
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</section>VIDEO SERIES
Explore Our Video Library
Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.
Up Next
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x" x-data="{
currentVideoUrl: 'https://www.youtube.com/embed/__NeP0RqACU?autoplay=0&rel=0',
currentVideoTitle: 'Introduction to SenangStart',
videos: [
{ id: 1, title: 'Introduction to SenangStart', duration: '5:30', url: 'https://www.youtube.com/embed/__NeP0RqACU?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/3B82F6/FFFFFF?text=Vid1' },
{ id: 2, title: 'Advanced Features Tutorial', duration: '12:15', url: 'https://www.youtube.com/embed/YgGzAKP_HuM?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid2' },
{ id: 3, title: 'Client Success: Acme Corp', duration: '8:42', url: 'https://www.youtube.com/embed/L_LUpnjgPso?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid3' },
{ id: 4, title: 'Webinar: Future of Web Design', duration: '45:10', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid4' }
],
playVideo(video) {
this.currentVideoUrl = video.url;
this.currentVideoTitle = video.title;
}
}">
<div space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:left">
<div space="m-b:small-3x max-w:[max-content] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600">
<p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">VIDEO SERIES</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mega font:tw-bold capitalize">
Explore Our Video Library
</h2>
<p space="max-w:[3xl]" visual="text-size:large tw-lg:text-size:big text:neutral-700">
Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.
</p>
</div>
<div layout="grid grid-cols:1 tw-lg:grid-cols:12" space="g:large">
<!-- Main Video Player -->
<div layout="tw-lg:col-span:8">
<div layout="overflow:hidden" space="m-b:small-3x" visual="bg:neutral-200 rounded:medium shadow:giant" class="aspect-video">
<iframe :src="currentVideoUrl" title="Main YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen space="w:[100%] h:[100%]"></iframe>
</div>
<div space="p:medium" visual="bg:neutral-100 rounded:medium shadow:small">
<h3 x-text="currentVideoTitle" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800"></h3>
</div>
</div>
<!-- Playlist -->
<div layout="tw-lg:col-span:4">
<h3 space="m-b:medium-2x" visual="text-size:huge font:tw-semibold text:neutral-800">Up Next</h3>
<div space="max-h:[400px] tw-lg:max-h:[calc(100vh-250px)] p-r:small" class="space-y-3 overflow-y-auto custom-scrollbar">
<template x-for="video in videos" :key="video.id">
<div
@click="playVideo(video)"
layout="flex items:center" space="g:medium p:small-3x" visual="rounded:medium cursor:pointer transition:all duration:slow hover:shadow:big" class="transform hover:scale-[1.02]"
:class="currentVideoTitle === video.title ? 'bg-blue-100 border-2 border-blue-500 shadow-md' : 'bg-white hover:bg-neutral-50 border'">
<img :src="video.thumb" :alt="video.title + ' Thumbnail'" layout="object:cover shrink-0" space="w:giant-2x h:[70px]" visual="rounded:small">
<div layout="overflow:hidden">
<h4 visual="font:tw-semibold truncate" :class="currentVideoTitle === video.title ? 'text-blue-700' : 'text-neutral-800'" x-text="video.title"></h4>
<p visual="text-size:small" :class="currentVideoTitle === video.title ? 'text-blue-600' : 'text-neutral-500'" x-text="video.duration"></p>
</div>
<i space="m-l:auto" visual="text-size:huge" class="fas fa-play-circle" :class="currentVideoTitle === video.title ? 'text-blue-500' : 'text-neutral-400'"></i>
</div>
</template>
</div>
</div>
</div>
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</section>