Elfsight YouTube Video Gallery

Webflow embeds a YouTube video with a Video element or a Code Embed, one video at a time. A channel that posts weekly turns that into standing maintenance: open the project, add another embed, restyle it to match the row above, republish. The videos on the site drift out of date the moment nobody remembers to do it.

Elfsight sells a widget that closes that gap. You point it at a channel, a playlist, or a set of video URLs, and it renders the whole set as one gallery. Elfsight caches the YouTube data and refreshes it about every 24 hours, so a new upload appears on the published site without a Webflow edit. Visitors watch in a popup or an inline player and stay on your page.

This suits marketers running video-heavy landing pages, creators who want a channel visible somewhere other than YouTube, educators publishing lesson libraries, and ecommerce teams putting demo and review videos next to a product description. The standard setup needs no JavaScript from you. What it does need is a paid plan on both sides, which the next section is specific about.

How to integrate Elfsight YouTube Video Gallery with Webflow

What is Elfsight YouTube Video Gallery? It is a client-side widget that displays YouTube channels, playlists, and individual videos in a configurable gallery. Elfsight now lists it as YouTube Gallery, and the older Yottie name survives only in the product URL. You choose sources, layout, play mode, and styling in the Elfsight dashboard, then copy a short installation code. Nothing about the gallery's appearance is edited in Webflow afterwards.

Teams reach for this when a Webflow page needs a video section that keeps itself current. A course site can present lessons as a grouped, searchable list. A product site can keep a review playlist fresh without republishing. Elfsight has no listing on the Webflow Marketplace, so every route below runs through custom code rather than an installed app. If you only ever need one video in one place, Webflow's YouTube integration handles that without a third-party widget.

Three routes exist. The Code Embed element drops the gallery on one page with no code written by you. Site-wide custom code loads the same script on every page from Site settings. The Webflow Data API and MCP server deploy and audit that script across many sites, and can push YouTube metadata into the CMS, at the cost of server-side work. Most sites need only the first.

Add the gallery with a Code Embed element

What you paste into Webflow is short and worth understanding before you paste it. The installation code is a <script> tag that loads Elfsight's platform file from their CDN, plus an empty container carrying your widget's ID. Elfsight's platform file scans the page for that container, then fetches the gallery's configuration and its own rendering code at runtime. Reading the shipped platform file confirms it accepts the container in two forms: a <div> whose class is elfsight-app-<widget_id>, or an <elfsight-app> element with a data-id attribute.

The Code Embed element is the right home for that code when the gallery belongs in one place, such as a homepage video section or a product page. Per Webflow's own article, the element is available if your site has an active Site plan, or if you have a Core, Growth, Agency, or Freelancer Workspace, all four of which are current Workspace plans. A free Starter site with no paid Workspace behind it has no route in, which is the most common reason a reader gets stuck here. Each element holds up to 50,000 characters and accepts HTML, CSS inside style tags, and JS inside script tags. Server-side languages such as PHP, Python, Perl, and Ruby are not supported in any Webflow code field.

To place the gallery on a page:

1. Copy the installation code from your Elfsight dashboard, under My Apps, by opening your gallery and clicking Install, then Copy Code.
2. In Webflow, click the ➕ icon and drag a Code Embed element to the spot where the gallery should sit.
3. Paste the code into the Code Embed editor and click Save & Close.
4. Adjust the element's width and height in the right sidebar.
5. Click Publish and select Publish to Selected Domains.

The canvas will not show the gallery. Any script tag in a Code Embed renders as a placeholder while you design, and the real thing appears once you preview, publish, or export. Preview and comment modes serve the site from a {shortName}.canvas.webflow.com subdomain, which is why Webflow documents extra work for scripts that validate their own origin. If you would rather the gallery stayed out of preview entirely, wrap the embed in Webflow's preview exclusion comment markers: <!-- EXCLUDE FROM PREVIEW: START --> and <!-- EXCLUDE FROM PREVIEW: END -->.

Current installation code ships with lazy loading switched on through a data-elfsight-app-lazy attribute, which holds the gallery back until a visitor scrolls, moves the mouse, or touches the page. The platform file reads four values for that attribute: disabled, enabled, in-viewport, and first-activity. Code copied before Elfsight added the attribute has no lazy behaviour at all, so an old embed sitting in a Webflow project is worth re-copying.

Load the gallery on every page with site-wide custom code

The same copied code goes into Site settings instead, and loads in the head of every page. Webflow's head and body fields hold up to 50,000 characters each, in Site settings and in per-page settings alike. Elfsight is candid that this route is meant for floating widgets, and asks you to contact its support team before using head code alone for a static embed on every page.

To install the code site-wide:

1. From the Webflow dashboard, click the three dots on your site and choose Settings.
2. Open Custom Code in the left sidebar, paste the code into the Head Code field, and click Save.
3. Click Publish and select Publish to Selected Domains.

Be clear about the trade. Site-wide placement means Elfsight's platform file downloads on every page a visitor opens, including the pricing page and the contact page where no gallery exists, and the container still has to be placed by hand wherever you want the gallery to render. If nothing shows after publishing, open the browser console. An error naming Content Security Policy and script-src means your policy has to allow *.elfsight.com and *.elfsightcdn.com, and Elfsight's troubleshooting guide walks the rest of the checks.

Deploy and audit the script with Webflow's API or MCP server

An agency that repeats this install across dozens of client sites should stop pasting head code by hand. Webflow's MCP server exposes the custom-code registry directly, so an AI client can register Elfsight's platform file once and apply it where it belongs. The documented MCP data tools include register_hosted_script, set_site_scripts, get_site_scripts, and set_site_freeform_code, which together cover registering, applying, auditing, and removing the script without opening a project.

The same operations exist over REST if you would rather script them yourself. Registering and applying are two separate calls, and conflating them is the usual source of confusion:

• Register the script: the hosted endpoint takes the CDN URL, an integrity hash, a version, and a display name, and returns an ID.
• Apply it to a site or page: the upsert endpoint takes only the registered script's ID, location, version, and attributes.
• Prefer hosted over inline here: registered inline scripts are capped at 2,000 characters, which is a separate and much smaller limit than the 50,000-character fields in the Webflow interface.
• Audit what is applied: the scripts currently applied to a site or page can be read back, so you can prove which client sites are carrying the Elfsight tag.

Elfsight publishes no public REST API for the gallery's data, so nothing here reads your video list back out of Elfsight. Its Embed SDK on NPM is aimed at platform builders putting Elfsight's widget catalogue inside their own products, and does not apply to a Webflow install.

Sync YouTube video metadata into the Webflow CMS

The gallery renders inside Elfsight's own container, so none of its content is in your site's HTML or in your Webflow CMS. If you want each video to have its own URL, its own SEO fields, and a place in a Collection List, a custom script has to put the metadata there.

To build the sync:

1. Call the YouTube Data API method channels.list and read the uploads playlist ID from contentDetails.relatedPlaylists.uploads.
2. Call playlistItems.list with that playlist ID to fetch video metadata. Google warns against using search.list to retrieve a channel's recent uploads.
3. List your collections, then fetch the target collection to confirm its field slugs.
4. Write items straight to the live site with the live item endpoint, or stage them and publish later.
5. Optionally register Webflow webhooks on the collection_item_published trigger to run downstream tasks.

Storing that metadata puts you under YouTube's rules rather than Webflow's, and the rule is specific. YouTube's Developer Policies state that API clients may temporarily store limited amounts of non-authorized data "but not longer than 30 calendar days", after which the stored data must be deleted or refreshed. A CMS collection that is filled once and never touched again is exactly the pattern that sentence is about. Read the policy and decide for your own build; we are not in a position to rule on whether a given sync complies.

What the gallery costs your plan, your page, and your visitors

An embedded widget is a dependency, not a design element, and this one has four costs worth knowing before it ships to a live site.

• A monthly load ceiling, not a visitor count: Elfsight's plan tiers allow 200 views a month on Free, 5,000 on Basic, 50,000 on Pro, and 150,000 on Premium, where a view is one widget load rather than one unique visitor.
• The gallery disappears when you exceed it: Elfsight's own troubleshooting docs say a widget past its monthly view limit stops displaying, so a published Webflow page can lose its video section without anything changing in Webflow.
• A call to Elfsight on every page load: the platform file requests core.service.elfsight.com/p/boot/ with your widget IDs and the visitor's full page URL as query parameters, sent with credentials, which happens before a cookie banner has resolved unless you gate the script yourself.
• Rendering code you do not host: Webflow serves only the loader and the container, while the gallery's actual code is fetched from Elfsight's CDN at runtime and can change without your site changing.

On the question that matters most for a consent banner, the answer is reassuring. We read the platform file that Webflow sites actually load and searched it for the usual visitor tracking: Sentry, Hotjar, Clarity, FullStory, LogRocket, PostHog, Mixpanel, session replay, and writes to localStorage. None of it is there. The page URL and the credentialed request are real and belong in your privacy notice; a recording of what visitors do on the page is not something this file sets up. Elfsight's marketing site runs its own advertising pixels, which is a separate thing from the widget and should not be confused with it. One limit on that check: the gallery's own bundle is served from a directory that refuses listing, so what we verified is the loader every install includes, not the chunk it pulls afterwards.

What you can build with the Elfsight YouTube Video Gallery Webflow integration

Pairing the two gives you video sections that update themselves, which is worth most wherever the video list changes faster than the site does.

• A homepage channel hub: one gallery of your newest uploads with inline playback, so visitors watch without being handed off to YouTube mid-visit.
• Product page demo reels: a playlist of how-to, unboxing, and review videos beside the product copy, answering questions that would otherwise reach support.
• Course and lesson libraries: grouped, searchable video lists for instructors, coaches, and online schools, with lessons held in a deliberate order.
• Property and testimonial galleries: virtual tours, client interviews, sermon archives, and campaign videos, all drawn from playlists you already maintain.

Sources have to be public: unlisted and private videos never appear, shortened youtu.be links are rejected, and a Shorts URL cannot be used as a source on its own, though Shorts already on a connected channel are pulled in alongside everything else. For a close cousin of this build, see how to embed an Instagram feed on a Webflow site.

If you manage this install across a client roster, connect Webflow's MCP server and let an agent register, apply, and audit the Elfsight script across every site from one place.