# Video components

> Integrate media seamlessly with 22 React video components, optimized for playback, control, and styled via Tailwind CSS.

126 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/video.

- [Video Player](https://21st.dev/@chetanverma16/components/video-player.md) — by Chetan Verma
- [Hero Video Dialog](https://21st.dev/@dillionverma/components/hero-video-dialog.md) — by Dillion Verma
- [Video Scroll Hero](https://21st.dev/@isaiahbjork/components/video-scroll-hero.md) — by Isaiah
- [Video Thumbnail Player](https://21st.dev/@ravikatiyar162/components/video-thumbnail-player.md) — by Ravi Katiyar
- [HoverPlayCard](https://21st.dev/@ruixen.ui/components/hover-play-card.md) — by Ruixen UI
- [Thumbnail button video player](https://21st.dev/@arunachalam/components/thumbnail-button-video-player.md) — by Arunachalam
- [Video Player Pro](https://21st.dev/@ruixen.ui/components/video-player-pro.md) — by Ruixen UI
- [Video Player](https://21st.dev/@preetsuthar17/components/video-player.md) — by Preet Suthar
- [Video Player](https://21st.dev/@haydenbleasel/components/video-player.md) — by Hayden Bleasel
- [Player Layout](https://21st.dev/@limeplay/components/player-layout.md) — by Limeplay
- [YouTube Embed](https://21st.dev/@inference-sh/components/youtube-embed.md) — by inference.sh
- [HLS Video Player](https://21st.dev/@joyco/components/hls-video-player.md) — by JOYCO
- [Video Ambient](https://21st.dev/@unlumen/components/video-ambient.md) — by Unlumen UI
- [YouTube Video Player](https://21st.dev/@cult-ui/components/youtube-video-player.md) — by cult/ui
- [Video Player](https://21st.dev/@thegridcn/components/video-player.md) — by The Gridcn
- [Scroll media expansion hero](https://21st.dev/@arunachalam/components/scroll-expansion-hero.md) — by Arunachalam
- [Hero Section 5](https://21st.dev/@meschacirung/components/hero-section-5.md) — by Méschac Irung
- [Interactive Bento Gallery](https://21st.dev/@anurag-mishra22/components/interactive-bento-gallery.md) — by Anurag Mishra
- [PrismaHero](https://21st.dev/@rahil1202/components/prisma-hero.md) — by Rahil Vahora
- [Hero Scrub](https://21st.dev/@jean.duthil13/components/hero-scrub.md) — by Jean Duthil
- [Dynamic Frame Layout](https://21st.dev/@oeneco/components/dynamic-frame-layout.md) — by John
- [Gaming Login](https://21st.dev/@kamaleshsa/components/gaming-login.md) — by KAMALESH S A
- [Hero With Video](https://21st.dev/@easemize/components/hero-with-video.md) — by Hossain Jahed
- [Hero Landing Page](https://21st.dev/@minhxthanh/components/hero-landing-page.md) — by Le Thanh
- [Glass Video Hero](https://21st.dev/@rahil1202/components/glass-video-hero.md) — by Rahil Vahora
- [Feature Section with Bento Grid](https://21st.dev/@manuarora700/components/feature-section-with-bento-grid.md) — by Manu Arora
- [Animated Video on Scroll](https://21st.dev/@youcefbnm/components/animated-video-on-scroll.md) — by YoucefBnm Bnm
- [Davincho Hero-1](https://21st.dev/@cnippet.dev/components/davincho-hero-1.md) — by Cnippet
- [Stories Carousel](https://21st.dev/@haydenbleasel/components/stories-carousel.md) — by Hayden Bleasel
- [FeaturedCrmDemoSection](https://21st.dev/@ruixen.ui/components/featured-crm-demo-section.md) — by Ruixen UI
- [Onboarding Checklist](https://21st.dev/@ravikatiyar162/components/onboarding-checklist.md) — by Ravi Katiyar
- [Hero Video](https://21st.dev/@youcefbnm/components/hero-video.md) — by YoucefBnm Bnm
- [Morphing Dialog](https://21st.dev/@ibelick/components/morphing-dialog/video-preview.md) — by Julien Thibeaut
- [Aero Hero-2](https://21st.dev/@cnippet.dev/components/aero-hero-2.md) — by Cnippet
- [Clip-Path Image](https://21st.dev/@uilayout.contact/components/clip-path-image.md) — by UI Layouts
- [About](https://21st.dev/@prebuiltui/components/about/about-section-with-play-video.md) — by prebuiltui
- [MultiMedia Testimonial](https://21st.dev/@ruixen.ui/components/multi-media-testimonial.md) — by Ruixen UI
- [Welcome](https://21st.dev/@ravikatiyar162/components/welcome.md) — by Ravi Katiyar
- [Media Button](https://21st.dev/@arunachalam/components/media-button.md) — by Arunachalam
- [Hero with bg video](https://21st.dev/@kurket21/components/progressive-hero.md) — by kurket21
- [Clipped Shape image](https://21st.dev/@uilayout.contact/components/clipped-shape-image.md) — by UI Layouts
- [Animated Banner](https://21st.dev/@dqnamo/components/animated-banner.md) — by dqnamo
- [Video Upload Card](https://21st.dev/@isaiahbjork/components/video-upload-card.md) — by Isaiah
- [Timeline](https://21st.dev/@nparashar150/components/timeline-1.md) — by Naman Parashar
- [Hero](https://21st.dev/@ruixen.ui/components/hero.md) — by Ruixen UI
- [Video Modal](https://21st.dev/@nyxbui/components/video-modal.md) — by Nyxb UI
- [VideoTimelineEditor](https://21st.dev/@dhileepkumargm/components/video-timeline-editor.md) — by Dhileep Kumar GM
- [Scroll trigger animations](https://21st.dev/@youcefbnm/components/scroll-trigger-animations/scroll-trigger-inset-x-demo.md) — by YoucefBnm Bnm
- [Scroll trigger animations](https://21st.dev/@youcefbnm/components/scroll-trigger-animations/scroll-trigger-inset-y-demo.md) — by YoucefBnm Bnm
- [Video Generator Card](https://21st.dev/@ravikatiyar162/components/video-generator-card.md) — by Ravi Katiyar
- [Social Stories](https://21st.dev/@abhi3hekk/components/social-stories.md) — by Abhishek Singh
- [Side Panel Video](https://21st.dev/@cult-ui/components/side-panel-video.md) — by cult/ui
- [ascii flower](https://21st.dev/@daschinmoyy21/components/ascii-flower.md) — by Chinmoy Das
- [Neon Nebula](https://21st.dev/@karthiksivacharan/components/neon-nebula.md) — by Karthik Sivacharan
- [Heximage](https://21st.dev/@arifuzzamanmoin/components/heximage.md) — by Moin
- [test](https://21st.dev/@npouliss/components/test.md) — by Nikolaos Poulis
- [Symbols Effect](https://21st.dev/@arlanoska/components/symbols-effect.md) — by Arlan
- [Tooltip](https://21st.dev/@anubra266/components/tooltip-1/tooltip-video-thumbnail.md) — by Abraham
- [seed](https://21st.dev/@yogaprtamaa/components/seed.md) — by Yoga pratama
- [minimal](https://21st.dev/@tanusahu9894/components/minimal.md) — by Tanisha

Full component directory: https://21st.dev/llms.txt