Add a Personalized Video to an HTML Page, SMS or Email

You can add a personalized video into an email, SMS, or HTML page by including its URL. Another option is to embed the video in your HTML page.

Insert personalized video URL

Use the personalized video URL to insert the video into an HTML page, email or SMS. The recipient can click the link to view the video.

For more information, see Copy video URL.

Embed the video in your HTML page

The following HTML snippet samples demonstrate how to embed personalized video in your HTML page.

MP4 snippet

Use the following snippet to embed an MP4 personalized video in your HTML page, or copy and paste the Script section of the snippet into the Head section of your personalized HTML page, and the Body content into the Body section.

When browsing to the personalized HTML page, you must supply the rid={RECORD_ID} in the query string.

For example: http://..... .html?rid=Harry_Miller. Otherwise, provide a default record ID within the script section.

Note that certain functions in this snippet, such as URLSearchParams, may not be compatible with all browsers.

Copy

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script>
      // Copy and paste this section into the Head section of your personalized HTML page
      // IMPORTANT: Set your default record ID here.
      const defaultRecordId = "DEFAULT RECORD ID";

      // Gets the record ID from the URL
      let recordId = new URLSearchParams(window.location.search).get("rid");
      // If no record ID has been supplied in the URL, the default record ID will be used.
      if (!recordId) recordId = defaultRecordId;

      document.addEventListener("DOMContentLoaded", (event) => {
      // The source of the video tag is replaced with the video URL.
        document.getElementById("myVideo").src =
          "https://stream-eu.xmpvs.com/v1/{USER_ID}/{PROJECT_ID}/" + recordId;
      });
    </script>
  </head>
  <body>
    <!-- Copy and paste this section into the Body section of your HTML page -->
    <h1>Test Video</h1>
    <div id="video">
      <video id="myVideo" height="300px" controls="">
        <source src="" type="video/mp4" />
      </video>
    </div>
  </body>
</html>

HLS snippet

Use the following snippet to embed an HLS personalized video in your HTML page.

When browsing to the personalized page, you must supply the rid={record_ID} in the query string.

For example: http://..... .html?rid=Harry_Miller.

Note that certain functions in this snippet, such as URLSearchParams, may not be compatible with all browsers.

You can pass optional attributes in the <video> tag to configure the video display.

The configurable attributes are:

controls: Specifies that video controls should be displayed.
height: Sets the height of the video player.
width: Sets the width of the video player.
poster: Specifies an image to be shown while the video is downloading, or until the user hits the play button. Enter a full https encoded URL path.
loop: Specifies that the video will start over again every time it is finished. Possible values: true or false.
muted: Specifies that the audio output of the video should be muted. Possible values: true or false.
autoplay: Specifies that the video will start playing as soon as it is ready. Possible values: true or false.

Note that some browsers may block autoplay if "muted" is set to false.

This XVS HLS player is built on top of the video.js framework, which is a free and open source HTML5 video player framework.

The instance object returned by the XVS HLS player is a video.js instance, that can be extended using video.js capabilities.

For more information, see video.js documentation.

Copy

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://unpkg.com/video.js@7/dist/video-js.min.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: #dddde1;
      }
      .video-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 100%;
      }
      .video-js .vjs-big-play-button {
        width: 1.6em;
        height: 1.6em;
        border-radius: 0.8em;
        margin-top: 0px !important;
        margin-left: 0px !important;
      }
      .hide-video {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="video-div">
      <video
        id="my-video"
        class="video-js vjs-big-play-centered hide-video"
        controls
        preload="auto"
        width="1000"
        data-setup="{}"
      >
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to
          a web browser that supports HTML5 video
        </p>
      </video>
    </div>
    <script src="https://video-eu.xmpvs.com/js/xvs-player-v1.min.js"></script>
    <script>
      const recordId = new URLSearchParams(window.location.search).get("rid");
      let src =
        "https://stream-eu.xmpvs.com/v1/{USER_ID}/{PROJECT_ID}/" +
        recordId +
        "?videoType=hls";
      let myPlayer = xvsPlayer("my-video");
      myPlayer.src({
        type: "application/x-mpegURL",
        src: src,
      });
      // To display full screen uncomment the following line
      // myPlayer.isFullscreen(true);
      myPlayer.ready(function () {
        //show video player only when it is ready
        let videoElem = document.getElementById("my-video");
        videoElem.classList.remove("hide-video");
      });
    </script>
  </body>
</html>

MP4 XMPL snippet

Use the following snippet to embed an MP4 personalized video in your XMPL HTML page.

When browsing to the personalized HTML page, you must supply the rid={XMPieRecipientKey} in the query string.

For example: http://..... .html?rid=00291f2b31dbd8963f9799dca5ca6a94

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- XMPie XMPL library -->
  <link href=https://ajax.xmcircle.com/ajax/libs/xmpl/3.1.4/xmp/css/xmp.css rel="stylesheet" media="screen">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1.4/xmp/js/xmp.min.js"></script>
  <script src="[path of the XMPL config file]/xmpcfg.js"></script>
</head>
  
<body ng-app="xmp.app" 
  ng-controller="XMPPersonalizedPage" 
  xmp-cloak
  xmp-clear-all-cookies-onload
  xmp-tracking-page-name="Landing">
                                
  <video id="x" width="700" height="381" controls autoplay  class="ng-scope" ng-if="xmp.r.XMPieRecipientKey" >
    <source type="video/mp4" ng-src="{{('https://stream-eu.xmpvs.com/v1/{USER_ID}/{PROJECT_ID}/' + xmp.r.XMPieRecipientKey) | xmpTrustUrl}}" />
  </video>
</body>
</html>

HLS XMPL snippet

Use the following snippet to embed an HLS personalized video in your XMPL HTML page.

When browsing to the personalized HTML page, you must supply the rid={XMPieRecipientKey} in the query string.

For example: http://..... .html?rid=00291f2b31dbd8963f9799dca5ca6a94.

Copy

  <!DOCTYPE html>
  <html ng-app="xmp.app" >
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <!-- XMPie XMPL library -->
        <link href="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1.4/xmp/css/xmp.css" rel="stylesheet" media="screen">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="[path of the XMPL config file]/xmpcfg.js"></script>
        <script src="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1.4/xmp/js/xmp.min.js"></script>
        <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
        <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
        <script src="https://video-eu.xmpvs.com/js/xvs-player-v1.min.js"></script>
        <script src="https://video-eu.xmpvs.com/js/xmp-video-hls-xmpl-v1.js"></script>
    </head>
    <body ng-controller="XMPPersonalizedPage" xmp-cloak xmp-clear-all-cookies-onload
    xmp-tracking-page-name="Landing" 
    >

    <h1>rid: {{xmp.r.XMPieRecipientKey}}</h1>

    <xmp-video 
        ng-src="{{('https://stream-eu.xmpvs.com/v1/{USER_ID}/{PROJECT_ID}/' + 
        xmp.r.XMPieRecipientKey + '?videoType=hls') | xmpTrustUrl}}" 
        class="video-js"
        controls
        width="480"
        height="320"
        preload="auto"
        data-setup="{}"
        unsupported-message="To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video (https://videojs.com/html5-video-support/)"
    >        
    </xmp-video> 
  </body>
</html>

MP4 snippet for password protected videos (beta)

This snippet allows you to display both password protected MP4 personalized videos and non-password protected videos.

Note: This is a beta version and is subject to change.

When browsing to the personalized HTML page, you must supply the user ID, project ID and RID (record ID) in the query string. For example:
http://..... .html?userid=myuser&projectid=124&rid=Mary_Smith.

Alternatively, you can place it in the <xvs-player> and <xvs-player-protected-video> tags, as seen in the following snippet:

Copy

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>XVS Player</title>
    <style>
      body {
        margin: 0;
      }
      .video-player-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-video-player {
        height: 100vh;
        width: 100vw;
        margin: 0;
        display: none;
      }
      xvs-player-protected-video {
        --modal-width: 300px;
        --modal-height: 300px;
        --modal-background-color: #f7f5ff;
        --modal-text-color: #767676;
        --modal-font-family: Helvetica, Arial, sans-serif;
        --modal-font-size: 1em;
        --modal-border: 1px solid #888;
        --modal-border-radius: 10px;
        --modal-text-align: center;
        --title-text-color: #767676;
        --title-font-size: 1em;
        --title-text-align: center;
        --button-background-color: #16b79c;
        --button-background-color-hover: #13a189;
        --button-text-color: #ffffff;
        --button-border-radius: 22px;
      }
    </style>
    <script
      defer
      src="https://dashboard-eu.xmpvs.com/videoPlayer-v1/xvs-player-components-beta.js"
    ></script>
  </head>
  <body>
    <div class="video-player-container">
      <div class="custom-video-player">
        <xvs-player id="videoPlayer" userId="myuser" projectId="124"></xvs-player>
      </div>
    </div>
    <div>
      <xvs-player-protected-video
        id="protectedVideo" userId="myuser" projectId="124"
      ></xvs-player-protected-video>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        setVideo(null);
      });
      function setVideo(token) {
        const newPlayer = document.getElementById("videoPlayer");
        newPlayer.setVideo(token);
        const playerContainer = document.querySelector(".custom-video-player");
        playerContainer.style.display = "block";
      }
      document
        .getElementById("protectedVideo")
        .addEventListener("password-verified", (event) => {
          console.log("Password verified with token:", event.detail.token);
          setVideo(event.detail.token);
        });
    </script>
  </body>
</html>

Configuration

URL parameters

You can set the following attributes using the query string or directly in the <xvs-player> tag:

userid: The XVS user ID associated with the video content.
projectid: The XVS project ID associated with the video.
rid: Unique identifier for the specific video record.
videotype: Type of the video file. Options include mp4 or hls.
trackvisits: Determines whether to track visits to the video. Optional, default is true.
theme: Customizes the player's theme. Choose from Video.js themes - city, forest, fantasy, or sea. Optional, defaults to city if not specified.
controls: Enables or disables player controls. Optional, defaults to true.
autoplay: Enables autoplay for the video. Optional, defaults to false.
loop: Sets whether the video should loop. Optional, defaults to false.
muted: Specifies if the video should start muted. Optional, defaults to muted.
poster: URL of an image to display as the video poster. Optional.

Setting attributes via query string

You can pass the attributes through the URL query string. For example:

https://example.com/videoplayer?userId=123&projectId=456&rid=789&videoType=mp4&theme=fantasy&controls=true&autoplay=true&loop=false&muted=false

Setting attributes in the tag

Alternatively, you can set the attributes directly in the <xvs-player> tag:

Copy

<xvs-player
    id="videoPlayer"
    userId="123"
    projectId="456"
    rid="789"
    videoType="mp4"
    theme="fantasy"
    controls="true"
    autoplay="true"
    loop="false"
    muted="false"
    poster="https://example.com/poster.jpg"
    >
</xvs-player>

CSS styles

Define CSS styles to customize the appearance of the video player and modal dialog.

Copy

<style>
  body {
    margin: 0;
  }
  .video-player-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .custom-video-player {
    height: 100vh;
    width: 100vw;
    margin: 0;
    display: none;
  }
  xvs-player-protected-video {
    --modal-width: 300px;
    --modal-height: 300px;
    --modal-background-color: #f7f5ff;
    --modal-text-color: #767676;
    --modal-font-family: Helvetica, Arial, sans-serif;
    --modal-font-size: 1em;
    --modal-border: 1px solid #888;
    --modal-border-radius: 10px;
    --modal-text-align: center;
    --title-text-color: #767676;
    --title-font-size: 1em;
    --title-text-align: center;
    --button-background-color: #16b79c;
    --button-background-color-hover: #13a189;
    --button-text-color: #ffffff;
    --button-border-radius: 22px;
  }
</style>