For developers

JavaScript Video Player and Gallery — No Framework

Add a video player or gallery to any site with plain JavaScript — one script tag and one element. Or build your own JS video player; we compare both below.

See the code ↓

No credit card needed

No dependenciesTypeScript-friendlySSR-safeLazy-loadedNo API keys

JavaScript

<!-- Anywhere in your HTML -->
<div class="elfsight-app-YOUR-WIDGET-ID" data-elfsight-app-lazy></div>
<script src="https://elfsightcdn.com/platform.js" async></script>

<script>
  // Or add it dynamically
  function mountVideoGallery(container, id) {
    const el = document.createElement("div");
    el.className = "elfsight-app-" + id;
    el.setAttribute("data-elfsight-app-lazy", "");
    container.appendChild(el);
    if (!document.querySelector('script[src*="elfsightcdn.com/platform.js"]')) {
      const s = document.createElement("script");
      s.src = "https://elfsightcdn.com/platform.js";
      s.async = true;
      document.body.appendChild(s);
    }
  }
</script>

Configure it visually — drop it into your JavaScript app

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

Build vs. embed

Why build a video gallery in JavaScript 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

API keys and quotasYouTube Data API keys and daily quotas, Vimeo tokens, TikTok and Instagram app review.
Fetching and cachingPagination, caching and refreshing feeds so new videos show up.
Player and popupResponsive player, popup, keyboard and focus handling, mobile quirks.
Vertical videoDifferent aspect ratios for Shorts, Reels and TikTok.
LayoutsCarousel, grid, masonry, playlist — each with its own edge cases.
SEO and analyticsVideoObject markup and tracking events.
MaintenancePlatform APIs change; someone has to keep it working.
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.

<div class="elfsight-app-YOUR-ID" data-elfsight-app-lazy></div>

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 JavaScript

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

The JavaScript component

Copy it into your project and pass the widget ID from the editor.

No framework, no build step. One element and one async script.
Dynamic mounting. Add galleries at runtime with a small helper.
Any stack. Static sites, server-rendered pages, CMS templates.

JavaScript

<!-- Anywhere in your HTML -->
<div class="elfsight-app-YOUR-WIDGET-ID" data-elfsight-app-lazy></div>
<script src="https://elfsightcdn.com/platform.js" async></script>

<script>
  // Or add it dynamically
  function mountVideoGallery(container, id) {
    const el = document.createElement("div");
    el.className = "elfsight-app-" + id;
    el.setAttribute("data-elfsight-app-lazy", "");
    container.appendChild(el);
    if (!document.querySelector('script[src*="elfsightcdn.com/platform.js"]')) {
      const s = document.createElement("script");
      s.src = "https://elfsightcdn.com/platform.js";
      s.async = true;
      document.body.appendChild(s);
    }
  }
</script>

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, live TikTokChannel or hashtag Instagram ReelsFrom an account VimeoShowcase or user ● LIVETwitchChannel or category Any video linkMP4 on your hosting

Popup player

Classic or vertical popup keeps users on the page.

CTA after the video

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

Schema.org markup

VideoObject data for every video, generated for you.

Channel header

Subscribers, views and a follow button.

Analytics events

Send interactions to Google Analytics.

Compare

Elfsight vs. building with JavaScript libraries

When to embed and when to build your own.

	ElfsightVideo Gallery	Build with player libraries
Time to ship	Minutes	Days to weeks
Sources	YouTube, Vimeo, TikTok, Instagram Reels, Twitch, any link	One per integration
API keys in your app	None	Required per platform
Feeds update automatically	✓	Build it
Layouts, popup, CTA card	✓	Build each
Schema.org and Google Analytics	✓	Build it
Custom styling and behavior	Custom CSS & JS	Full control
Clients edit content without you	✓ Visual editor	—
Maintenance when APIs change	Handled by Elfsight	Yours

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 JavaScript 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 easiest JavaScript video player?

The easiest JavaScript video player for galleries is a widget: one element and one async script. For a single file, the HTML5 video element with its JavaScript API is enough.

How do I make a video player with JavaScript?

Use the HTML5 video element and its JavaScript API, or a library like video.js. Our guides cover both. If you need a gallery from YouTube, Vimeo or TikTok, the widget is faster.

Does it need jQuery?

No. It’s a single script with no dependencies.

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.