i wan to create a youtube video section where my vidoes will be displayed and on click it navigate to the link on youtube so this is some row skiliten make it good professional compont use react + tailwind cs if ui component needed make the ui compont and create a recat compont for this and dont use ui librray create compoent if needed and give me full working code <div class="mx-auto w-full max-w-8xl px-4 md:px-6 lg:px-40 py-6 md:py-[60px] relative"><div class="flex items-center"><h2 class="font-bold text-xl md:text-[32px]">Discover and Learn</h2><img src="/_next/static/media/bulb.3fe95fed.svg" alt="bulb" class="w-[22px] md:w-[41px]"></div><img src="/_next/static/media/zigzag.d1f61145.svg" alt="zigzag" class="w-[178px] md:w-[284px]"><h3 class="text-slate-400 mt-2 md:mt-4 text-sm font-medium md:text-base max-w-[80%] pb-4 md:pb-6">Explore and Learn with AcadFly about getting started on your journey to Study Abroad</h3><div class="slick-slider pb-4 ReelsSection_reelsCarouselWrapper__o3J4s slick-initialized" dir="ltr"><div class="slick-list"><div class="slick-track" style="width: 1603px; opacity: 1; transform: translate3d(-412.2px, 0px, 0px);"><div data-index="0" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/3d21d204-729a-40fb-b954-c23d0d70db89.jpg");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Avoid Making These Study Abroad Application Mistakes 🤯|| Check Pinned Comment for Free Guidance 🔗" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/VclwGcSBZeU?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=15&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget16"></iframe></div></div></div></div></div></div><div data-index="1" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/aa56c2e8-39fb-4246-a80a-49a8811208c6.jpg");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="BIGGEST Myths About Studying Abroad! 😱 #Shorts #acadfly" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/EjwdJU-blC0?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=17&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget18"></iframe></div></div></div></div></div></div><div data-index="2" class="slick-slide slick-active slick-current" tabindex="-1" aria-hidden="false" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/925edf39-5674-4bf1-b630-254d1c457371.jpg");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="MBBS Abroad Vs MBBS India #shorts #acadfly" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/1J_8vwcQTEs?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=19&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget20"></iframe></div></div></div></div></div></div><div data-index="3" class="slick-slide slick-active" tabindex="-1" aria-hidden="false" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/adac850a-70d6-432f-8ad4-3f514fd734a1.png");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="TOP 10 Universities in CANADA! #shorts #acadfly" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/P_We2KIwH5I?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=21&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget22"></iframe></div></div></div></div></div></div><div data-index="4" class="slick-slide slick-active" tabindex="-1" aria-hidden="false" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/7d156e9d-f816-4b13-9690-e57bf4d90655.png");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Eligibility for IVY League Universities!🤔#shorts #USA #ivyleague" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/gQJbTRn-IhA?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=23&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget24"></iframe></div></div></div></div></div></div><div data-index="5" class="slick-slide slick-active" tabindex="-1" aria-hidden="false" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/45a332c7-e62e-412b-8e32-b101ebc42d2a.png");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="STUDY Masters in CS Abroad!👨‍💻 #Shorts #acadfly #ComputerScience" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/cJL-pYeJfmM?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=25&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget26"></iframe></div></div></div></div></div></div><div data-index="6" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 229px;"><div><div class="mx-1.5 relative rounded-xl overflow-hidden"><div class="w-full h-full"><div class="absolute w-full h-full aspect-[9/16] max-h-[400px] bg-no-repeat bg-cover bg-center" style="background-image: url("https://d2bps9p1kiy4ka.cloudfront.net/5b09189f7285894d9130ccd0/4e65e6d9-e1f1-4357-b5a6-75f9fc875c5f.png");"></div><div class="absolute bg-slate-900 w-full h-full rounded-2xl opacity-30"></div><div class="w-16 h-16 p-1 absolute top-0 m-auto bottom-0 left-0 right-0 cursor-pointer"><div class="absolute left-0 right-0 bottom-0 top-0 animate-pulse bg-transparent opacity-10 border-[10px] rounded-full"></div><img class="absolute left-0 right-0 bottom-0 top-0 z-[20]" src="/_next/static/media/video-play-button.7bacf604.png" alt="Play Icon"></div></div><div class="aspect-[9/16] max-h-[400px] w-full"><div style="width: 100%; height: 100%;"><div style="width: 100%; height: 100%;"><iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="NO GRE or GMAT Required in These UK Universities! 😱 #shorts #acadfly" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/GmJDnq42EDE?autoplay=0&mute=0&controls=0&origin=https%3A%2F%2Fwww.acadfly.com&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=27&forigin=https%3A%2F%2Fwww.acadfly.com%2F&aoriginsup=1&gporigin=https%3A%2F%2Fwww.acadfly.com%2F&vf=1" id="widget28"></iframe></div></div></div></div></div></div></div></div></div></div>
YouTube Video Section Component
I'll create a professional YouTube video section with a carousel that displays videos and navigates to YouTube when clicked. This implementation uses React and Tailwind CSS with custom components.
Features
This YouTube video section includes:
- Professional Design: Clean, responsive layout matching the provided reference
- Video Carousel: Horizontal scrolling with navigation buttons
- Video Cards: Each with thumbnail, overlay, and animated play button
- YouTube Integration: Clicking a video loads the YouTube embed
- Responsive Layout: Adapts to different screen sizes
How It Works
The
VideoSectioncomponent:- Manages the carousel scrolling functionality
- Displays the section header and navigation controls
- Renders the video cards in a horizontal scrollable container
The
VideoCardcomponent:- Displays the video thumbnail with a play button overlay
- Handles the click event to show the YouTube iframe
- Provides a direct link to YouTube on second click
The carousel navigation:
- Left and right buttons to scroll through videos
- Buttons disable when reaching the start or end of the carousel
Customization
You can easily customize this component by:
- Replacing the sample video data with your actual YouTube videos
- Adjusting the styling using Tailwind classes
- Modifying the card size or layout to fit your design
- Adding video titles or additional information if needed
To use this component, simply import the VideoSection component into any page of your application.
the videos are not reels kind of they are youtube videos actual videos https://youtu.be/xNA6nGza318?si=93bfvM_5SJGHmTAdhttps://youtu.be/7HXUz3fDWjA?si=WkCurpw37MUra3BLhttps://youtu.be/0KuOkB26hiI?si=JIbVkf8QXfJaWrH_https://youtu.be/ARXNLrHcK_U?si=3krNM6ZLv76oPondhttps://youtu.be/t9flKCS2fNg?si=MwwZE6KQK_JL1ilthttps://youtu.be/t9flKCS2fNg?si=MwwZE6KQK_JL1ilt
I'll create a more traditional YouTube video section that displays regular YouTube videos in a grid layout, similar to YouTube's main interface. Let me update the component to match this style.
YouTube Video Section - Regular Format
I've updated the component to display regular YouTube videos in a grid layout, similar to YouTube's main interface. This design is more appropriate for standard YouTube videos rather than short-form content.
Features
- Grid Layout: Videos are displayed in a responsive grid (1 column on mobile, 2 on tablets, 3 on desktops)
YouTube Style Cards: Each card includes:
- Thumbnail image
- Video title
- Channel name
- View count and upload time
- Channel icon placeholder
Interactive Elements:
- Hover effects with scaling thumbnails
- Play button overlay appears on hover
- Title changes color on hover
- Direct YouTube Navigation: Clicking any video card opens the YouTube video in a new tab
How It Works
The component uses the YouTube video IDs you provided to create cards that link directly to the corresponding YouTube videos. When a user clicks on any part of a video card, they'll be taken to the YouTube page for that video.
Customization
You can easily:
- Add more videos to the
videosarray invideo-section.tsx - Adjust the grid layout by modifying the grid classes
- Add video duration overlays (commented code is provided)
- Replace placeholder channel icons with actual channel logos
- Change the hover effects or styling to match your brand
This implementation provides a professional, clean interface that matches YouTube's standard video display format while maintaining your branding elements in the header section.