SmartVideo player page

`ypos` / `xpos`	`xpos: 0`	`xpos: 50`	`xpos: 100`
`ypos: 0`	top-left	top	top-right
`ypos: 50`	left	center	right
`ypos: 100`	bottom-left	bottom	bottom-right

ypos / xpos

xpos: 0

xpos: 50

xpos: 100

ypos: 0

top-left

top

top-right

ypos: 50

left

center

right

ypos: 100

bottom-left

bottom

bottom-right

` form Use the `

` form in a framework. In Angular, use this form rather than ``: `CUSTOM_ELEMENTS_SCHEMA` permits dash-case custom-element names and does not recognize the undashed SmartVideo tag. In Vue, `` can also be used if your template compiler's [`isCustomElement` option](https://vuejs.org/api/application.html#app-config-compileroptions-iscustomelement) recognizes it. - **Angular and Vue:** put the `smartvideo` div inside a wrapper element in a component that owns one video and disposes its player on unmount/destroy (see below). Put `v-if`/`*ngIf` and keys on the video-owning component. Dispose initialized players in Vue's `onBeforeUnmount` or Angular's `ngOnDestroy`; Vue's `onUnmounted` runs after unmounting. Bind `src` and the other attributes on the `smartvideo` div only when it is created. To play a different video, recreate the component (for example with `:key` in Vue) instead of changing `src` afterward; a `src` on the outer wrapper does nothing, and changing it on an embed SmartVideo has already replaced does not update playback. - **React:** render an empty wrapper in JSX and create the `smartvideo` div inside it after mount, as shown below. Drop the video in wherever you want it to appear, using the same attributes you'd put on the tag. In an HTML template (Angular, Vue): ```html

``` In React, render an empty wrapper and create the embed after mount: ```jsx import { useEffect, useRef } from "react"; export function SmartVideo({ src }) { const wrapperRef = useRef(null); useEffect(() => { const wrapper = wrapperRef.current; const embed = document.createElement("div"); embed.className = "smartvideo swarm-fluid"; embed.setAttribute("src", src); embed.setAttribute("width", "1280"); embed.setAttribute("height", "720"); embed.setAttribute("controls", ""); wrapper.appendChild(embed); return () => { wrapper.querySelector(".video-js")?.player?.dispose(); wrapper.replaceChildren(); }; }, [src]); return

; } ``` The React example disposes players that have already initialized, but it does not cancel initialization still in progress. On iOS, and in browsers without Media Source Extensions that play HLS natively, initialization can wait for a network request; changing `src` or unmounting during that wait can leave a player that is never disposed. Our player scans for both the `` tag and the `smartvideo` class and treats them identically, so you lose nothing by using the `div`. The attributes match the tag - see [Basic SmartVideo tag options](/help/basic-smartvideo-tag-options/). For a Library video, copy its Source URL from **Media Details** and use it as `src`; uploads use a `swarmify://` reference, while URL Imports retain their source URL. The SmartVideo head snippet must still be installed on the page. For an external source, the URL must return the video bytes to an anonymous HTTP GET without a login or cookies - not `localhost` or an auth-gated page. A link that expires can stop working when Swarmify needs to fetch it again. ## Load the snippet once, in your root HTML Add your SmartVideo snippet to the `` of your app's root HTML file (for example `index.html` in Angular CLI, Vite, or Create React App), not inside a component that mounts and unmounts. It only needs to load once for the whole app. You can grab the snippet from the **Configuration** tab in [your dashboard](https://dash.swarmify.com/); the [non-WordPress setup guide](/help/using-smartvideo-on-non-wordpress-platforms/) walks through where it goes. **Server-rendered frameworks (Next.js, Nuxt, Angular with SSR):** load the snippet once through your framework's script-loading mechanism. Create the video embed only in the browser, after the containing component has hydrated, so the player cannot replace server-rendered markup before the framework hydrates it. Keep the root script configuration outside route components. If your app sends a Content-Security-Policy, these are the default Swarmify origins to account for: - `script-src`: `https://assets.swarmcdn.com`, plus authorization for your inline configuration snippet using your policy's nonce or hash. - `connect-src`: `wss://hornets.swarmcdn.com`, `https://video-node.swarmcdn.com`, and `https://video-node2.swarmcdn.com`. - `media-src`: `https://video-node.swarmcdn.com`, `https://video-node2.swarmcdn.com`, and `blob:` for MediaSource playback. - `img-src`: `https://assets.swarmcdn.com`, both video-node origins for generated posters, and `data:` for the player's built-in icons, plus any custom poster origin. - `style-src`: `https://assets.swarmcdn.com` for the player stylesheet. The player also inserts styles and sets inline dimensions, so a policy that blocks inline styling needs separate integration testing. - `font-src`: `data:` for the player's icon font. This is not a complete policy to paste over your app's existing one. External video sources and optional integrations can need additional origins. Check the browser's CSP violations while loading and playing a video, and add only the permissions your setup uses. ## Videos that appear after navigation In a single-page app, video elements can be added after the first load when a route changes or a component renders. SmartVideo uses a `MutationObserver` on the document to trigger rescans when nodes are added. Newly inserted SmartVideo embeds are picked up automatically; you do not need a manual initialization call after React, Vue, or Next.js client-side navigation. Set the source and other attributes before inserting the embed. When SmartVideo initializes an element it replaces it with a Video.js player and removes the `smartvideo` class. Keep an outer wrapper owned by your framework, but let SmartVideo own everything inside it. In React, create the embed imperatively inside that wrapper after mount, as in the example above. For Vue and Angular, use a video-owning component with an outer wrapper, avoid changing the original embed's attributes after SmartVideo replaces it, and dispose initialized players during the appropriate cleanup hook. Test the framework's mount, update, and removal paths. For React, see [the guidance on safely modifying DOM managed by React](https://react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs). **Clean up initialized players:** Dispose initialized players during cleanup using the captured wrapper (`wrapper.querySelector(".video-js")?.player?.dispose()`), as in the React example above. React's `useEffect` cleanup runs after the component is removed from the DOM; Vue users who need cleanup before removal should use `onBeforeUnmount`. This does not cancel pending initialization, as noted above. Don't import a separate copy of Video.js to look the player up; it won't know about SmartVideo's players. Video.js documents [player removal and disposal](https://videojs.com/guides/player-workflows/#removing-players). Disposal also tears down SmartVideo's Swarm registration when that playback tech is active. Simply removing the DOM node is not a substitute for disposal. When returning to a route, create a fresh embed inside a fresh wrapper; do not reuse the already-replaced embed or add the `smartvideo` class back to the initialized player. ## A note on mobile apps SmartVideo is a browser-based player. If your mobile app is a web or hybrid app - for example one built with Ionic or Capacitor, which run your web app inside a web view - the same embed works. Two iOS notes: test on a real device rather than browser device-emulation (emulated iOS can falsely report video support - see [Why is SmartVideo not working in an emulated iOS browser](/help/why-is-smartvideo-not-working-in-an-emulated-ios-browser/)), and for inline, non-fullscreen playback make sure your native shell allows inline media playback, which Capacitor and Ionic can configure. If your app has fully native screens (Swift or Kotlin) that don't use a web view, those screens can't run the browser embed; play from your original video source there instead. ## See also - [How to add a video to your non-WordPress website](/help/how-to-add-a-video-to-your-non-wordpress-website/) - [Using SmartVideo with Shopify, Squarespace, Wix, and other platforms](/help/using-smartvideo-on-non-wordpress-platforms/) - [Get started with SmartVideo](/help/get-started-with-swarmifys-smartvideo/) If you hit a snag wiring SmartVideo into your framework, email [support@swarmify.com](mailto:support@swarmify.com) and we'll help. *Keywords: Angular, React, Vue, Next.js, Nuxt, JavaScript framework, single-page app, SPA, server-side rendering, hydration, className, custom element, div class smartvideo, route change, cleanup, dispose, CSP, Ionic, Capacitor, web view, native app* --- https://swarmify.com/help/embed-smartvideo-on-patreon/ # Can I use SmartVideo on Patreon? Category: Setup & Installation / Other platforms Created: 2026-05-20 Updated: 2026-10-03 SmartVideo needs a page that allows its player script. Host your video on your own SmartVideo-enabled site and share that page's link with patrons. Not directly. Patreon's [video-post instructions](https://support.patreon.com/hc/en-us/articles/360017431292-Posting-videos) embed supported video URLs through Embed.ly, not a custom player script, and SmartVideo needs its JavaScript snippet and an embed element on the page. It has no standalone viewing URL or iframe embed code to paste into Patreon. ## The workaround You can still use SmartVideo to deliver videos to your patrons -- here's how: 1. **Set up SmartVideo on a website you control.** Use a site that lets you add the SmartVideo script to the page's `` and an embed element to its body. 2. **Add the SmartVideo snippet to your site's header.** Log in to the [SmartVideo Dashboard](https://dash.swarmify.com/), click the **Configuration** tab, and copy the JavaScript snippet into your site's `` section. 3. **Embed your video on a page.** Add a SmartVideo tag to any page on your site: ```html ``` 4. **Share the page link on Patreon.** Paste the URL of your video page into a Patreon post. Your patrons click through to watch on your site. ## Don't share the raw video link If you upload a video to your SmartVideo Library, you may come across an internal file URL that looks like `https://files.swarmify.com/videos/.../tag`. **Don't paste that link into your Patreon post.** It's an internal source address, not a shareable viewing link -- anyone who clicks it lands on a Swarmify login page instead of your video. Always share the link to the **page on your own site** where you embedded the video (step 4 above), never the raw `files.swarmify.com` URL. ## What your patrons see Your patrons don't need a Swarmify account, and they never pay Swarmify anything. When you share the link to your own video page, they click through and the video just plays -- ad-free and optimized. Your SmartVideo account is the only one involved; it quietly handles hosting and delivery in the background. If a patron tells you they're being asked to log in to Swarmify or pay Swarmify, it almost always means the raw `files.swarmify.com/.../tag` link got shared instead of your page link. Swap it for your own page's URL and they'll be able to watch right away. ## Tips - You can create one page per video or a single page with multiple videos -- whatever works for your content. - If you want to restrict access, use your website's built-in password protection or membership features to lock the page. - Your SmartVideo account handles all the video hosting and delivery -- Patreon is just the link-sharing layer. If you don't have one yet, [create your SmartVideo account](https://dash.swarmify.com/signup?plan=smartvideo_growth_annual). ## Other platforms with the same limitation Some other platforms also restrict custom embeds: Substack, Medium, and most email newsletter tools. The same workaround applies -- host on your own site and share the link. *Keywords: patreon, embed, patreon video, custom embed, workaround, link sharing, content creator, raw link, login page, login wall, files.swarmify.com, share video link* --- https://swarmify.com/help/install-smartvideo-on-adobe-muse/ # Install SmartVideo on Adobe Muse Category: Setup & Installation / Other platforms Created: 2020-02-22 Updated: 2026-10-10 Adobe Muse was retired in 2020 and has no SmartVideo-specific install steps; use the standard non-WordPress installation snippet instead on any Muse site. Adobe Muse was retired by Adobe in March 2020 and no longer receives updates or support. We no longer maintain Muse-specific install instructions. If you're still running a Muse-built site, the snippet still works the same as any other non-WordPress install. See [Install SmartVideo on another CMS](/help/install-smartvideo-on-another-cms/) for the current steps. **If you have any questions, send us a message!** --- https://swarmify.com/help/install-smartvideo-on-another-cms/ # Install SmartVideo on another CMS Category: Setup & Installation / Other platforms Created: 2020-02-22 Updated: 2026-10-10 Install SmartVideo on any CMS besides Squarespace: get your Swarm CDN Key, paste the snippet before closing head tag, then add smartvideo tags. How to get up and running with SmartVideo if you are using another CMS. If you are not using Squarespace, or are on WordPress and need more manual controls than are offered by our WordPress plugin, these are the installation instructions for you. ## Account setup: If you already have a SmartVideo account, scroll down to ***What happens after I install?*** If you do not, [create your SmartVideo account](https://dash.swarmify.com/signup?plan=smartvideo_growth_annual). Once registered, you'll be given a unique key to access the Swarmify API. This **Swarm CDN Key** is required to configure your site for video delivery by Swarmify. ## What happens after I install? After installing our script into your site's head tag, SmartVideo will begin scanning your site for videos. **Replace YouTube & Vimeo embeds** is on by default in the **Configuration** tab of your [Swarmify dashboard](https://dash.swarmify.com/), so the snippet includes `autoreplace: { youtube: true, vimeo: true }`, and any Vimeo videos on your site will be automatically converted to SmartVideo. See [Automatic Vimeo conversions](/help/automatic-vimeo-conversions/) for details. SmartVideo imports Vimeo videos whose **Who can watch** setting is **Anyone**. To keep those videos private to your own site while SmartVideo serves them, set **Where can this be embedded** to **Specific domains** and list your website's domain. Password-protected and **Only me** videos stay on Vimeo; [change the setting](/help/vimeo-having-a-little-trouble/) to convert them. **A video usually converts to SmartVideo in about as long as it runs**, so a 10-minute video takes about 10 minutes. A Vimeo embed switches to the SmartVideo player once its video has converted -- look for its floating rounded control bar in place of your original embed. A YouTube embed switches right away and streams from YouTube inside the SmartVideo player until our copy is ready. For more ways to confirm it's working, see [How do I know SmartVideo is working?](/help/how-do-i-know-smartvideo-is-working/). **Note on YouTube:** YouTube conversion is best-effort -- YouTube's download restrictions mean the fetch can fail, so some videos convert and some don't. For playback you can rely on, download the video and upload it to your SmartVideo library through your [SmartVideo dashboard](https://dash.swarmify.com), then place it on your page with a SmartVideo tag. ### Installation 1. Click on the Configuration tab in your [Swarmify dashboard](https://dash.swarmify.com/), follow the on-screen instructions, and copy the snippet to your clipboard. 2. Paste the snippet before the final **`` tag** of your HTML template 3. **Please note:** if you are unable to manipulate the actual page and insert the JavaScript above the **``** tag, most 3rd party CMS have a section called **"Code Injection"** commonly used to add Google Analytics or Facebook pixels to the template. You can insert our JavaScript in into the same area. **Great job, now the snippet is installed and you are ready to add *``* tags! 🎉** To add videos directly without relying on YouTube, [learn how to add a video to your site](/help/how-to-add-a-video-to-your-non-wordpress-website/). --- https://swarmify.com/help/using-smartvideo-on-non-wordpress-platforms/ # Using SmartVideo with Shopify, Squarespace, Wix, and other platforms Category: Setup & Installation / Other platforms Created: 2026-03-22 Updated: 2026-10-05 Install SmartVideo on Shopify, Squarespace, Wix, Webflow, and other sites that let the loader run in the same document as the video, then embed videos or enable Vimeo auto-conversion. SmartVideo works beyond WordPress when your platform lets the SmartVideo loader run in the same page document as a video element, such as a `` tag or an existing Vimeo embed with auto-conversion enabled. Usually that means a head-code field plus an HTML block; builders that sandbox HTML blocks, such as Wix, need the loader and tag together inside one block. Head-code access alone is enough to auto-convert existing Vimeo embeds on the page; adding a SmartVideo tag also needs an HTML block. SmartVideo does not provide standalone video URLs or iframe embed code. A platform that accepts only approved iframe providers and blocks custom scripts cannot run SmartVideo. If your platform puts custom HTML inside an isolated iframe, the loader must run in that same document as the video element; a loader in the outer page cannot activate it. ## Step 1: Get your SmartVideo snippet Log in to the [SmartVideo Dashboard](https://dash.swarmify.com/) and click the **Configuration** tab. Choose your settings and copy the generated JavaScript snippet. The standard loader looks like this. Replace `YOUR_SWARM_CDN_KEY` with your **Swarm CDN Key** from the dashboard: ```html ``` Keep `data-cfasync="false"` on both script tags. The standard snippet includes YouTube replacement, but YouTube conversion is best-effort; for reliable playback, download a video you have permission to use and upload it to your SmartVideo Library. ## Step 2: Add the snippet to your site On most platforms, paste the snippet into your site's `` section; Wix is the exception (see below). Confirm that your platform and plan also allow the body embed in Step 3. ### Shopify In your Shopify admin, open **Online Store**, then use the theme's **…** menu and select **Edit code**. Add the snippet before `` in your theme's `theme.liquid` layout and save. See [Shopify's theme-code instructions](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/edit-theme-code). ### Squarespace Use site-wide code injection to install the head snippet, then add the video element separately on the page. See our [Squarespace installation guide](/help/install-smartvideo-on-squarespace/) and [Squarespace's code-injection documentation](https://support.squarespace.com/hc/en-us/articles/205815908-Customize-parts-of-your-site-with-code-injection). ### Wix Wix runs **Embed HTML** blocks in a separate iframe, so a head snippet cannot activate a SmartVideo tag inside one. To add a SmartVideo player, paste the loader snippet and the SmartVideo tag together into one **Embed HTML** block; no head install is needed. Site-wide **Custom Code** (**Settings > Custom Code** under **Development & integrations**; requires a published site with a connected domain) is only for auto-converting existing videos on the page. Full steps: [SmartVideo on Wix](/help/does-smartvideo-work-on-a-wix-site/). ### Webflow Open **Site settings > Custom code**, paste the snippet into **Head code**, and click **Save changes**. Publish the site for the change to go live. Custom-code access depends on your Webflow plan and permissions; see [Webflow's current requirements and instructions](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags). ### ClickFunnels See our [ClickFunnels installation guide](/help/install-smartvideo-on-click-funnels/) for the head snippet and page embed. Confirm which ClickFunnels version you use before following its setup steps. ### General HTML sites Open your site's main template or layout file and paste the snippet between the `` and `` tags. ## Step 3: Add videos to your pages Once the snippet is installed, you have two options for adding videos: **YouTube and Vimeo auto-conversion (on by default):** In the **Configuration** tab, **Replace YouTube & Vimeo embeds** stays on unless you turn it off, and your snippet then sets both `youtube: true` and `vimeo: true` inside `autoreplace`. SmartVideo detects existing Vimeo embeds on the page and converts them, then plays each one in the SmartVideo player once its conversion is ready. You don't need to change those embed codes. See [Automatic Vimeo conversions](/help/automatic-vimeo-conversions/). **SmartVideo tag:** Add this to an HTML or code block in the page body: ```html ``` Replace the example `src` with the source from your SmartVideo Library embed code or a public video-file URL. An external source must return the video bytes without a login and remain available for as long as the video is embedded; SmartVideo re-fetches it for fallback and re-conversion. Do not use expiring or signed URLs. A video usually takes about as long as it runs to convert, and longer when our encoders are busy. ## If your CMS strips custom HTML tags Some platforms strip unfamiliar HTML tags like ``. If your CMS allows the required attributes on a `

`, use the `smartvideo` class instead: ```html

``` The player recognizes the `smartvideo` class as well as the `` tag. This does not bypass a platform's script restrictions or iframe isolation. Building with a JavaScript framework like Angular, React, or Vue? See [Using SmartVideo with JavaScript frameworks](/help/using-smartvideo-with-javascript-frameworks/) - the `div` form is usually the cleaner choice there too. ## Platform-specific installation guides See the installation guide for your platform: - [Shopify](/help/install-smartvideo-on-shopify/) - [Squarespace](/help/install-smartvideo-on-squarespace/) - [Wix](/help/does-smartvideo-work-on-a-wix-site/) - [Webflow](/help/install-smartvideo-on-webflow/) - [ClickFunnels](/help/install-smartvideo-on-click-funnels/) - [Moodle](/help/install-swarmify-on-moodle/) - [Any other CMS](/help/install-smartvideo-on-another-cms/) If you run into trouble on a platform not listed here, reach out to [support@swarmify.com](mailto:support@swarmify.com) and we'll help you get set up. *Keywords: Shopify, Squarespace, Wix, Webflow, ClickFunnels, non-WordPress, install, snippet, head, code injection, custom HTML* --- https://swarmify.com/help/how-i-use-smartvideo-in-a-lightbox/ # How I use SmartVideo in a lightbox? Category: Using the WordPress Plugin / Plugin how-tos Created: 2020-02-23 Updated: 2026-10-05 Use SmartVideo in a WordPress lightbox with HTML5 video optimization on Growth or Pro, or a SmartVideo tag inside an inline HTML container. There are two ways to use SmartVideo inside a WordPress lightbox: 1. Optimize an existing HTML5 video from your WordPress Media Library (Growth or Pro). 2. Put a SmartVideo tag inside the lightbox's inline HTML content (including on Startup). First, [install and configure the SmartVideo WordPress plugin](/help/install-smartvideo-on-wordpress/) with your **Swarm CDN Key**. Make sure **Disable SmartVideo on this page** is not checked for the page that contains the lightbox. If your lightbox plugin creates the video when it opens (Option 1), open **SmartVideo** in your WordPress admin sidebar, go to the **Settings** tab, and set **Conditional script loading** to **Off**. Standard and Strict use server-side content and builder scans to decide whether to load the player script. A video inserted only when the lightbox opens may not be detected, so use Off for this setup. ## Option 1: Optimize a WordPress Media Library video Use this option if your lightbox inserts an HTML5 `