The Rapt Media Analytics Dashboard gives insight into how viewers are interacting with your video and is accessible from within a project.

You can view a project’s Analytics pane by selecting the icon at the bottom of the navigation at the left side of any project.

Finding the Analytics pane

The Analytics pane has two main components: a general stats section and a data visualization section. In the general stats section, you’ll be able to see:

General stats

  • Total project plays: Each time a viewer plays the project from the beginning

  • Unique plays: Each time a viewer plays the project from the beginning, excluding repeat views

  • Repeat viewers: Total number of users who have repeatedly played the project from the beginning

  • Link-outs: Number of times users have clicked a link-out (a hotspot that redirects a user to an external location)

  • Time on project: The average length of time that each viewer spends viewing the project during playback

  • Plays per user: The average amount of plays by each viewer from the beginning of the project

  • Nodes per session: The average amount of nodes visited by a viewer during each project play

In the data visualization, you’ll have access to charts displaying:


The number of plays a project has received over time.

Analytics plays


The number of plays each node has received over time (typically corresponds with a single media item).

Analytics nodes


Analytics demographics

Consists of four pie charts:

  • Country: Total project views by country

  • Device type: Total project views by device

  • Browser: Total project views by browser

  • Operating system: Total project views by browser

iPhone Playback

Rapt Media’s patented iPhone encoding process allows your project to play back natively in mobile Safari. Due to hardware limitations, we recommend following the best practices listed below to ensure optimal playback on iOS devices:


  • Every video clip must have an audio track. If the video is meant to be silent, you can add a silent audio track to the video before upload to fulfill this requirement.

  • Autoplay will not work on iPhone (or any mobile device for that matter)


  • Keep your project size manageable. We recommend 25-30 nodes

  • Use fairly short clips (< 1min). This is good for both encoding and user experience

  • Minimize on-screen choices as they take up real estate–we recommend no more than three at a time


  • Plan for poor Wi-Fi and poor cellular data environments by keeping the entire page light and easy to load.

  • Do not use hover states. Many sites or web apps use hover states to reveal menus or options. Because there is no “hovering” or “mouseover” on a touch device, a quick tap on a link or button on iOS devices registers as a hover if the element in question has a hover style declaration.

Custom CSS


You can customize the look and feel of the player through the use of CSS; the same style markup used to control the look and feel of web pages. Using this feature, you can style virtually any element within the video frame including player controls, loading spinner, and hotspots.

The Rapt Media player is implemented through an iframe on the host page. Generally, browsers do not allow the host page to control the style of the elements within the iframe. The CSS feature allows you to insert a custom stylesheet into the player by pointing to a specific URL through a field in the publishing settings pane.

This stylesheet is hosted by the customer and can be freely modified at any time to achieve the desired look and feel.


  • Styles for the custom controls for the Rapt Media player should be in their own CSS file. Do not include these styles in a global stylesheet being used elsewhere on the site. Global styles could inadvertently override other elements in the player.

  • The stylesheet host should be production-ready.

  • If your project is going to be viewed over https:// protocol, your host must have a valid SSL Certificate signed by a project over http://.

Attaching Custom Styles

  • To attach your stylesheet, enter the protocol-relative URL of your file to the CSS field in the publishing pane of your project.

  • Click update. Due to CDN caching you may have to wait up to 45 minutes for the file to be included in your project.

  • Initially, the file referenced by the URL can be blank, and you can iterate on the file to see your changes in real time (assuming your browser cache is cleared).


Player Controls

Although this stylesheet is called last, the specificity of the style declarations in the existing player stylesheet will override any non-specific declarations in your styles. To ensure that your styles have precedence, they should be scoped to:

.iframe-body .vjs-default-skin 

For example, to change the play button in the control bar to be red, do:

.iframe-body .vjs-default-skin .vjs-play-control {color: #f00;} 

Modifying All Buttons

The buttons in the player are li.projectbutton with anchor tags inside them. The majority of the styles for the button are at the li level.

For example, to change all buttons to zoom on hover, do:

li.projectbutton:hover {transform: scale(1.25);}

Modifying Specific Buttons

You can add a specific class to the li.projectbutton element within the Rapt Media Composer. To do this, select the button you wish to style from within the node editor and enter a class name into the CSS field.

For example, if a button is classed with .menu_button, it could be modified like this: {background-color: rgba(128, 37, 45, 0.5)}

Referencing Images

When referencing images, you must use the full absolute URL.

For example: {background: transparent URL( no-repeat}

Custom Fonts

Most browsers will not allow cross-origin font calls, so loading custom web fonts from your server will not work in most modern browsers.

You can embed custom fonts in the stylesheet using base64 encoding, which circumvents the cross-origin restriction. This comes at a cost, however, since it could greatly increase the size of the stylesheet. Also, be sure that any fonts that are included in this manner allow this type of inclusion in their license.

  • Depending on your front-end development resources, you should allow for about a week to customize the player and test those customizations. NOTE: Because browsers and devices differ in their support of specific styles, testing should be completed across all target browsers and devices.

  • Apply CSS once the following are completed and approved by both parties:

    • Project(s) are completed within the editor

    • Project(s) are published in editor

    • Project(s) are mobile optimized

  • If CSS is enabled before the requirements listed above are met, then CSS should be turned off before the implementation of the player on the customer’s page. CSS may be turned back on once QA testing is complete and the player is approved as functional after implementation.

  • Because custom CSS can affect every aspect of the player, Rapt Media cannot respond to support requests until custom styles are disabled on the project.

Customer Support

  • Rapt Media does not provide support for custom styles. For example, if the player functions incorrectly on some or all devices/browsers after custom styles are applied, the customer must troubleshoot their own styles. Rapt Media can consult on custom styles; consultation time can be purchased (if not included in your subscription).

  • If a customer reports an issue that can be reproduced when custom styles are disabled, Rapt Media will support that request in keeping with the customer’s SLA.

Media labeling

You can organize your media by adding labels to the videos and images in your library. Labels make it easy to manage your media as your library becomes larger.

Click the label icon Finding the label icon at the top of your media library to reveal the label pane.

Creating labels

Click the “New label” button to create your first label. Enter the name of your label in the field and press return/enter to add it to your label list. You can create as many labels as you need. We recommend using meaningful naming conventions. You can click and drag each label into position in the label list for optimal organization.

Labeling media

There are two methods to labeling media in the Composer. Media can have multiple labels and labels can contain multiple media.

Adding media to labels

You can click and drag media onto existing labels to associate the video or image with that particular label. To indicate that the operation is successful, the label will briefly flash “labeled!” You can apply a label to multiple media by holding down the Shift key and selecting the videos and images you wish to label. Then, click and drag the selected media onto the desired label.

Adding labels to media

Conversely, you can click and drag a label onto the media. The label will briefly flash “labeled” and the number on the right of the label will increment by one to indicate success. Adding the a label to a media that already has the same label will result in no action.

Modifying labels

You can modify labels by clicking on the three-dot menu icon that appears when you hover over a specific label. This will reveal three options:

  • Change label color: Choose from six colors to apply to the label.

  • Rename label: Change the name of the label.

  • Delete label: Delete the label.

Filtering by labels

Simply click the label you wish to filter by to show all media with that label. You can filter by multiple labels at a time. The current label is indicated both in the label list and under “filtered by” above your media. To remove the filter you can click the close button next to “filtered by” or next to the label itself.

Removing labels from media

To remove a label, you can click on the media’s options menu, which is displayed on hover, to see a list of assigned labels and click on the “x” next to the label you want to remove.

You can remove a label from multiple media by holding down shift, selecting the media, and clicking on the label icon in the bottom of the media pane. Click on the “x” next to the label you want to remove.


What is a CDN?

A CDN is a global network of servers used to deliver web content to users based on geographic location. The servers cache versions of content locally and distribute it to users who are closest to that particular server, minimizing load times and delivering better performance. Generally, the server cache is set to refresh periodically, updating to the latest version of the webpage or content.

Does Rapt Media have a CDN?

Yes. Rapt Media uses AWS Cloudfront to ensure that projects playback seamlessly regardless of geographic location.

Why doesn’t my project immediately update after I publish changes?

You may notice a delay between the time you publish changes to your project and when those changes are reflected in your live video. This has to do with the CDN and the frequency with which the cache is refreshed. Projects update every 45 minutes, so depending on when you republish, it could be anywhere from zero to 45 minutes before the live version shows the updates. For example, if you republish your changes 30 minutes after the cache refreshed, it will be 15 minutes until your project updates. It’s important to know that your current project will continue to be available to viewers during this period, so there is no downtime.

Contact your client services representative if your changes haven’t appeared within 45 minutes of republishing.

Adding a custom poster frame

A poster frame is the image that viewers see in the Rapt Media player before they initiate playback. The composer selects a frame from your video to use for this image by default. You can choose to select a custom poster frame instead by following the steps below.

Follow these steps to customize the poster frame

  1. Navigate to the publishing pane.
  2. Press the “choose file” button under the poster frame settings.
  3. Navigate to your desired image file in the finder.
  4. Select “open”.

The poster image thumbnail will update to show your new image. There may be a slight delay between updating the image and when it appears live on your project due to cdn caching.


Captions, typically known as closed captions or subtitles, allow viewers to toggle on readable text for sounds and dialogue while watching your project’s media. Our player allows references to WebVTT (.vtt) files to handle captioning, and our composer provides functionality to upload these files, link to valid WebVTT URLs, or request captioning from 3rd party services.

Captions management

To get started, navigate to your media’s edit page by double clicking (or clicking “Edit” from the media’s menu) a media in your library. Next, click the closed captions icon on the right of the edit media navigation.

Finding captions icon

This will bring you to a page that allows you to upload and submit new WebVTT files, as well as manage existing captions for the video. Below will show the management area, and describe the functionality.

Captions management

  • Adding media by upload: Click the browse button, then select a valid .vtt file. The file will be uploaded and reflected in your media’s caption list.
  • Adding media by url: Input a valid HTTP URL that references a .vtt file then click submit. The file will be linked and reflected in your media’s caption list.
  • Changing a captions language: Once uploaded or submitted by URL, captions will need to have their language changed if they are not English. Do this by finding the caption item in your list, and using the language dropdown to select the correct language code.
  • Edit existing URL caption: If your previously submitted URL caption happens to change, click the pencil icon to edit its URL value to the new .vtt file.
  • Deleting a caption: Should you need to delete a previously added caption, just click the trashcan icon to permanently remove it from the media.

Note: Adding, updating, and deleting captions will not be reflected during project playback until the project with the associated media is republished.

3Play captioning

A third captioning option as previously mentioned, is provided by an external transcibing service that is integrated with our composer. This service is provided by 3Play Media. In order to use this service you must have configured a 3Play account and registered the addon through our composer. Once those steps are completed, you will notice a new option in your captions management screen for your media. This new option will explain the 3Play process, and allow you to request that the media be sent to 3Play to be transcribed and turned into captions for the media (this process may take a few days).