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

Vue Video Player and Video Gallery

Add a video player or gallery to a Vue app: mount one element and load the widget script — videos managed in the Elfsight editor.
No credit card needed
See the code ↓
Vue
<!-- VideoGallery.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";

onMounted(() => {
  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement("script");
  s.src = SRC;
  s.async = true;
  document.body.appendChild(s);
});
</script>

<template>
  <div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>

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

Configure it visually — drop it into your Vue 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 Vue 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 quotas

YouTube Data API keys and daily quotas, Vimeo tokens, TikTok and Instagram app review.

Fetching and caching

Pagination, caching and refreshing feeds so new videos show up.

Player and popup

Responsive player, popup, keyboard and focus handling, mobile quirks.

Vertical video

Different aspect ratios for Shorts, Reels and TikTok.

Layouts

Carousel, grid, masonry, playlist — each with its own edge cases.

SEO and analytics

VideoObject markup and tracking events.

Maintenance

Platform APIs change; someone has to keep it working.

Client edits

Every 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.
Vue
<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 Vue

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

The Vue component

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

  • Vue 3 and Nuxt. In Nuxt, the script is added in onMounted, so it only runs on the client.

  • Composition API. A tiny single-file component with one prop.

  • Multiple instances. Use the component as many times as you need; the loader is shared.

Vue
<!-- VideoGallery.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";

onMounted(() => {
  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement("script");
  s.src = SRC;
  s.async = true;
  document.body.appendChild(s);
});
</script>

<template>
  <div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>

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.
Card — the youtube channel preset, with the youtube tile, straight on

YouTube

Channel, playlist, Shorts, liveYouTube
TikTok channel — vertical videos from an account

TikTok

Channel or hashtagTikTok
Vimeo showcase — a whole showcase in a grid

Vimeo

Showcase or userVimeo
Twitch channel — the stream in the player

Twitch

Channel or categoryTwitch
A video opened in the classic viewer, standing over the gallery it opened from

Popup player

Classic or vertical popup keeps users on the page.
The call to action — the card of the offer over the video it ended on

CTA after the video

A card with your link or product when a video ends.
Google and search — two overlapping tiles, staggered

Schema.org markup

VideoObject data for every video, generated for you.
The channel header with its Subscribe

Channel header

Subscribers, views and a follow button.
Google Analytics — the mark on a tile

Analytics events

Send interactions to Google Analytics.
Compare

Elfsight vs. building with Vue libraries

When to embed and when to build your own.
Feature
Elfsight Video 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
Yes
Build it
Layouts, popup, CTA card
Yes
Build each
Schema.org and Google Analytics
Yes
Build it
Custom styling and behavior
Custom CSS & JS
Full control
Clients edit content without you
✓ Visual editor
No
Maintenance when APIs change
Handled by Elfsight
Yours

Time to ship

Video Gallery

Minutes

Build with player libraries

Days to weeks

Sources

Video Gallery

YouTube, Vimeo, TikTok, Instagram Reels, Twitch, any link

Build with player libraries

One per integration

API keys in your app

Video Gallery

None

Build with player libraries

Required per platform

Feeds update automatically

Video Gallery

Yes

Build with player libraries

Build it

Layouts, popup, CTA card

Video Gallery

Yes

Build with player libraries

Build each

Schema.org and Google Analytics

Video Gallery

Yes

Build with player libraries

Build it

Custom styling and behavior

Video Gallery

Custom CSS & JS

Build with player libraries

Full control

Clients edit content without you

Video Gallery

✓ Visual editor

Build with player libraries

No

Maintenance when APIs change

Video Gallery

Handled by Elfsight

Build with player libraries

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.
#1
Top service in the world for website widgets
3M+
Users trust Elfsight to upgrade their websites
4.8
Rating 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
Help

Questions and resources

Frequently asked questions

For developers

YouTube IFrame API: A Practical Guide

The YouTube IFrame Player API lets JavaScript control an embedded player: load videos, play, pause, seek and listen for events.YouTube IFrame API: A Practical Guide