NEWMeet the new Video Gallery — YouTube, TikTok, Instagram Reels, Vimeo and Twitch in one widget.

Social

Video

Audio

Reviews

Chats

Forms

E-commerce

Tools

Find a widget for you

You can use our widgets to accomplish practically any task on your website — increase users' confidence, grow conversion, engage your visitors, provide support, etc.

See All Widgets
For developers

Next.js Video Player and Video Gallery

Add a video player or gallery to a Next.js site with next/script — videos managed in the Elfsight editor, no player code in your repo.
See the code ↓
No credit card needed
No dependenciesTypeScript-friendlySSR-safeLazy-loadedNo API keys
Next.js
// npm install react-elfsight-widget
// components/VideoGallery.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function VideoGallery({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/page.tsx (Server Component)
// <VideoGallery id="YOUR-WIDGET-ID" />

Trusted by over 3,000,000 small businesses, agencies and top global brands worldwide

Configure it visually — drop it into your Next.js app

  1. 1. Choose a template
  2. 2. Connect your videos
  3. 3. Add to website
Build vs. embed

Why build a video gallery in Next.js from scratch?

A “simple” video gallery hides weeks of work. Skip it — ship the gallery in minutes and spend your time on the product.

What building it yourself really takes
  1. API keys and quotasYouTube Data API keys and daily quotas, Vimeo tokens, TikTok and Instagram app review.
  2. Fetching and cachingPagination, caching and refreshing feeds so new videos show up.
  3. Player and popupResponsive player, popup, keyboard and focus handling, mobile quirks.
  4. Vertical videoDifferent aspect ratios for Shorts, Reels and TikTok.
  5. LayoutsCarousel, grid, masonry, playlist — each with its own edge cases.
  6. SEO and analyticsVideoObject markup and tracking events.
  7. MaintenancePlatform APIs change; someone has to keep it working.
  8. Client editsEvery new video or tweak becomes a ticket for you.
With Elfsight Video Gallery

One component. Configure sources, layout and design in the visual editor; your code stays the same.

<VideoGallery id="YOUR-ID" />
  • No API keys or quotas in your app
  • Feeds from YouTube, Vimeo, TikTok, Instagram Reels, Twitch and any link
  • 7 layouts, popup player, CTA card
  • Schema.org markup and Google Analytics
  • Maintained by Elfsight when platforms change
Integration

Drop-in integration for Next.js

Create the widget, copy its ID and render one component. Everything else is configured visually.

The Next.js component

Copy it into your project and pass the widget ID from the editor. Step-by-step: Elfsight help center ↗

  • Official React component. Uses react-elfsight-widget inside a small client component.
  • App Router friendly. Import the client wrapper into any Server Component page.
  • Static export. Works with output: "export" — nothing runs on the server.
Next.js
// npm install react-elfsight-widget
// components/VideoGallery.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function VideoGallery({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/page.tsx (Server Component)
// <VideoGallery id="YOUR-WIDGET-ID" />

Performance and security

Async and lazy

The script loads asynchronously and the widget renders when it scrolls into view.

No dependencies

Nothing added to your bundle — one external script.

No keys in your code

Platform connections live in Elfsight, not in your repo or env vars.

Works with strict security policies

If your site uses a Content Security Policy, allow Elfsight’s domains and the video platforms’ players.

Customization

Customize it like code — or don’t write any

Use the visual editor for 90% of the work and Custom CSS & JS for the rest.

Custom CSS

Restyle any element to match your design system.

Custom JS

Run your own code when the widget renders — for tweaks and integrations.

Visual editor

Layouts, card styles, themes, fonts, popup and card elements.

Filters and sorting

Include or exclude videos by keywords or date.

Hand off to clients

Clients update videos themselves — no ticket, no redeploy.

No redeploys

Change videos and design without touching your codebase.

Out of the box

Everything the widget does for you

Features you’d otherwise build, test and maintain.

YouTubeChannel, playlist, Shorts, liveTikTokChannel or hashtagInstagram ReelsFrom an accountVimeoShowcase or user● LIVETwitchChannel or categoryAny video linkMP4 on your hosting

Popup player

Classic or vertical popup keeps users on the page.

Shop now

CTA after the video

A card with your link or product when a video ends.

{ } JSON

Schema.org markup

VideoObject data for every video, generated for you.

Subscribe +1 subscriber

Channel header

Subscribers, views and a follow button.

Plays

Analytics events

Send interactions to Google Analytics.

Compare

Elfsight vs. building with Next.js libraries

When to embed and when to build your own.

Video GalleryBuild with player libraries
Time to shipMinutesDays to weeks
SourcesYouTube, Vimeo, TikTok, Instagram Reels, Twitch, any linkOne per integration
API keys in your appNoneRequired per platform
Feeds update automatically✓Build it
Layouts, popup, CTA card✓Build each
Schema.org and Google Analytics✓Build it
Custom styling and behaviorCustom CSS & JSFull control
Clients edit content without you✓ Visual editor—
Maintenance when APIs changeHandled by ElfsightYours

Need DRM, custom analytics pipelines or a fully bespoke player? Build it — start with our Video.js vs react-player vs hls.js comparison.

Why Elfsight

Trusted by developers and agencies

Ship faster for clients and keep them happy after launch.

#1Top service in the world for website widgets
3M+Users trust Elfsight to upgrade their websites
4.8Rating from thousands of reviews on G2
99.99%Uptime keeping your widgets live
Built for real use cases

Start from templates for YouTube channels, testimonials, product videos, portfolios and more.

Explore templates →
Award-winning support

Our team helps you get started, customize and solve any issue.

Contact support →
Free widget installation

Prefer not to do it yourself? An Elfsight expert can install and set up your gallery at no extra cost.

Request installation →
Built for agencies

Manage projects, collaborate with teammates, share access and scale widgets across many client websites.

Join as an agency →
90+ widgets

Grow your site with reviews, social feeds, forms and popups — all on the same platform.

See all widgets →
Available in 78 languages

Localized interface and texts for your visitors.

Community of website creators

Share ideas, get advice and vote for new features.

Join community →
Regular product updates

New Video Gallery features and improvements based on your feedback.

See what’s new →

Ship a video gallery in your Next.js app today

Create the widget for free, copy the component and deploy. No API keys, no trial, no credit card.

Create Video Gallery widget
Free plan includes
  • Every source and layout
  • Custom CSS & JS
  • Call-to-action, Schema.org and Google Analytics
  • Free forever — limited by monthly widget views
See all plans →
Help

Questions and resources

Frequently asked questions

What is the best Next.js video player?

For a Next.js video player with galleries and multiple sources, load Video Gallery with next/script. For a single file, the HTML5 video element or react-player works.

What’s the best video player for Next.js?

For full control, libraries like video.js or react-player. For galleries, playlists and multiple sources with no maintenance, embed Video Gallery as a component.

Does it work with the App Router and static export?

Yes. next/script loads the widget in the browser, so it works with server components and static export.

Do I need API keys for YouTube, TikTok or Instagram?

No. Sources are connected in the Elfsight editor; your app only renders the widget element.

Does it affect Core Web Vitals?

The script loads asynchronously and the widget is lazy-loaded. Give the container a min-height to avoid layout shift.

Can I have several galleries on one page?

Yes. Render the component once per widget ID; the loader script is shared.

My site has a strict Content Security Policy. What should I allow?

Allow scripts from elfsightcdn.com plus Elfsight’s data and media domains, and frames from the video platforms you use (for example youtube.com).

Is there a JavaScript API?

Custom JS in the editor runs together with the widget and can react when it has rendered — enough for most tweaks. A public API isn’t documented yet.

Can I style it with my own CSS?

Yes. Use Custom CSS in the editor to restyle any element.

For developers

Video.js vs react-player vs hls.js vs Plyr: Which Video Player Library?Video.js is a full, plugin-rich player; Plyr is a light, good-looking player; react-player wraps many sources for React; hls.js adds HLS streaming to browsers that lack it.HTML Video Tag: The Complete Guide with ExamplesThe HTML <video> element plays video files natively.YouTube IFrame API: A Practical GuideThe YouTube IFrame Player API lets JavaScript control an embedded player: load videos, play, pause, seek and listen for events.YouTube Embed Code GeneratorPaste any YouTube link and get a responsive embed code in seconds.