Setup & Installation

Host a SmartVideo player page for iframe-only tools

Updated October 10, 2026

SmartVideo does not issue an iframe embed code or a direct video-file URL. If a tool accepts a webpage URL, or lets you paste an iframe that points to a webpage on your site, you can host a small HTML player page there and use that page. A field that accepts only a direct video-file URL still cannot use SmartVideo this way. For the distinction, see Does SmartVideo give me an iframe embed or a direct video link?.

What you need

  • A website where you can upload a static HTML file and open it at a webpage URL.
  • Your Swarm CDN Key from the Dashboard tab, the first screen after you log in to your dashboard.
  • Video sources SmartVideo accepts: an MP4 source URL, a swarmify:// Library reference, a YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID), or a Vimeo URL in the forms Basic SmartVideo tag options lists. You can add an optional poster URL for each video.
  • A tool that accepts a webpage URL, or accepts iframe HTML and allows the iframe to load your page.

Create the player page

Save this as an HTML file, such as video.html. Replace the key and the video list with your own values. Keep each video’s source in the file; the query string only selects a name from that list.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>SmartVideo player page</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #000;
    }
    body {
      display: grid;
      place-items: center;
    }
  </style>
  <script data-cfasync="false">
    var swarmoptions = {
      swarmcdnkey: "YOUR_SWARM_CDN_KEY"
    };
  </script>
</head>
<body>
  <script data-cfasync="false">
    var videos = {
      intro: {
        src: "https://your-video.example.com/file.mp4",
        poster: "https://your-video.example.com/poster.jpg",
        width: 1280,
        height: 720
      }
    };
    var params = new URLSearchParams(window.location.search);
    var videoName = params.get("v") ?? Object.keys(videos)[0];
    if (Object.hasOwn(videos, videoName)) {
      var selectedVideo = videos[videoName];
      var player = document.createElement("smartvideo");
      player.setAttribute("src", selectedVideo.src);
      player.setAttribute("width", selectedVideo.width);
      player.setAttribute("height", selectedVideo.height);
      if (selectedVideo.poster) {
        player.setAttribute("poster", selectedVideo.poster);
      }
      player.setAttribute("class", "swarm-fluid");
      player.setAttribute("controls", "");
      player.setAttribute("playsinline", "");
      document.body.append(player);
    }
  </script>
  <script async data-cfasync="false" src="https://assets.swarmcdn.com/swarmcdn.js"></script>
</body>
</html>

Add more named entries to videos when you need more than one video. Set each entry’s width and height to that video’s own size in pixels, so the player keeps the video’s shape. Open the page with ?v=intro to select the intro entry; with no v parameter, the first entry plays. An unknown or empty name does not create a player. The own-property check also rejects inherited names such as constructor and __proto__; it uses Object.hasOwn, supported in Safari 15.4 and newer.

Do not read a key or video source from the query string. If you put a source in the URL, anyone could try to play an arbitrary source through the key on your domain. The key and listed video sources are visible in the page’s source to anyone who can access it, so use only videos you intend to make playable there. A domain-locked key must allow the domain where you host this page; domain locking does not make the page private.

Use the page in your tool

For a tool that accepts a webpage URL, use the URL of the uploaded file. For a tool that accepts iframe code, paste an iframe pointing to that URL, for example:

<iframe src="https://www.example.com/video.html?v=intro" title="Introduction video" style="border:0;width:100%;aspect-ratio:16/9" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Set aspect-ratio to match the width and height of that video entry: 16/9 for 1280 x 720, 9/16 for a vertical 720 x 1280, and so on. Keep the iframe responsive with width:100%; the page inside the iframe cannot resize the iframe itself. A field that accepts only a direct video-file URL is different: SmartVideo does not provide one.

In a desktop Chrome test on Linux on 2026-10-02, playback and fullscreen worked in the TalentLMS iFrame unit editor and learner preview, and in the Easygenerator HTML content block editor and Preview. On an iPhone, playback and fullscreen worked with the page opened on its own and inside a responsive iframe on a plain web page. The page used in these tests was a stand-in. Safari on a Mac, iPad, Android, the course tools on a phone, published courses, SCORM exports inside a third-party LMS, and domain-locked accounts were not tested.

MLS virtual-tour fields usually must be unbranded, and a page on your agent or brokerage website can break that rule because its URL identifies you. Hawaii Information Service MLS, for example, does not allow agent or broker websites as a virtual-tour host because the video link URL contains identifying information. Check your MLS’s rules before you use this page in a listing.

Keywords: iframe, iframe-only platform, iframe embed, self-hosted player page, player page URL, direct video link, SmartVideo HTML, domain lock, LMS

Get SmartVideo live on your site

Set it up on WordPress, Shopify, Squarespace, or any platform in a few minutes.

14-day free trial · Card required, no charge until day 15