Upload Digital Content

Giving your customers the option to embed QR codes that play videos on a web page of your choosing couldn't be easier.

Web Page

First, let's prepare the web page that'll have the embedded video.


On the HTML side of things, you only need a HTML video tag with the id 'spiffEmbeddedVideo'.

<video controls id="spiffEmbeddedVideo" >
  Sorry, your browser doesn't support embedded videos.

In our example, we added a little message for browsers that don't support this feature. Most do, so this is just a message for the few people of very small number of devices.


The last thing to do is add our JavaScript snippet either to the page or as a reference JS file.

Here's what the JavaScript looks like:

window.addEventListener('load', (event) => {
  const urlParams = new URLSearchParams(window.location.search);
  const myParam = urlParams.get('video');

  const decoded = atob(myParam);

  const video = document.getElementById("spiffEmbeddedVideo");

    new URL(decoded);
    video.src = decoded;
  } catch (_) {
    const links = JSON.parse(decoded);
    links.forEach(function (item){

      const source = document.createElement('source');
      source.src = item.href;


  video.onended = function() {
    if (document['exitFullscreen']) {
    } else if (document['webkitExitFullscreen']) {
    } else if (document['mozCancelFullScreen']) {
    } else if (document['msExitFullscreen']) {
    document.getElementById("overlay").style.zIndex = "2";

function replaySpiffEmbeddedVideo(){
  document.getElementById("overlay").style.zIndex = "-1";

One tidy approach is to create a new JavaScript file, calling it what you like, and pasting the above code into it.

Lets say we call it spiffEmbeddedVideo.js.

Then in your HTML page where you have the video tag, add a reference to this new file:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <script type="text/javascript" src="spiffEmbeddedVideo.js"></script>

    <video controls id="spiffEmbeddedVideo" >
        Sorry, your browser doesn't support embedded videos.



Now the web page is ready, we'll set things up on Spiff's side.

Digital Content Step

In the Experience Builder, add a Digital Content Step to a Scene.

Select the Config tab.

In the Base URL box, type in the URL of the page that will play the video content.



Once you're done building your Experience, your customers will be able to upload video, which will then create a QR code.

When scanned, this QR code will link to the the URL you provided and play the video.