Embedding a media clip

Use the embed option to place your video content on your website (You can also learn more about advanced developer embedding options).

To start, select a media clip from the Media Library and click the “Preview & embed” button on the top right:

The Preview & Embed Page

On the Preview page, you’re able to see how the clip would look on a variety of device sizes, like mobile, tablet, or desktop, which you can toggle above the video.  This screen is split into two main sections:

On the left: A large player where you can preview your video exactly as it will appear.

On the right: The “Preview settings” panel. This is where you will generate and copy your embed code.

How to Get Your Embed Code

In the “Preview settings” panel on the right, follow these simple steps:

1. Select Playout: Choose the “Playout” you wish to use from the dropdown. The playout controls the player’s appearance, features, and advertising.
2. Select Embed Type: Choose your preferred embedding method from the “Embed type” dropdown. Each option is explained below.
3. Copy Code: The code in the box will update automatically based on your selections. Click the blue “Copy” button to copy the code to your clipboard.

You can now paste this code into your website’s HTML.

Embed Types

1.0 | Javascript (Recommended)

This is the primary and recommended method for embedding. It provides the most functionality, is fully responsive, and ensures the best viewing experience.

How to use: Select “javascript” from the “Embed type” dropdown, choose your “Playout”, and click “Copy”.

<script type=”text/javascript” src=”//yourpublication.bbvms.com/p/default/c/2734714.js” async=”true”></script>

2.0 | iFrame

This method is an alternative for platforms or content management systems that do not allow Javascript embeds.

• How to use: Select “iFrame” from the “Embed type” dropdown, choose your “Playout”, and click “Copy”.

Please note: Using an iFrame may be suboptimal for 360 video and fullscreen capabilities. We strongly recommend using the Javascript method whenever possible.

Example:

<iframe  

onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"  

src="//demo.bbvms.com/p/default/c/2734714.html?inheritDimensions=true" width="720" height="400"  

frameborder="0" webkitallowfullscreen mozallowFullscreen oallowFullscreen msallowFullscreen allowfullscreen >  

</iframe>

3.0 | AMP

Use this option specifically for embedding your video on a Google AMP (Accelerated Mobile Pages) page.

• How to use: Select “AMP” from the “Embed type” dropdown, choose your “Playout”, and click “Copy”.

Example:

<amp-iframe 
sandbox="allow-scripts allow-same-origin" 
layout="responsive" 
src="https://demo.bbvms.com/p/default/c/2734714.html?inheritDimensions=true" 
width="720" 
height="405" 
frameborder="0" 
allowfullscreen resizable referrerpolicy="unsafe-url"
>
<div overflow tabindex="0" role="button" aria-label="Expand player">
Expand player
</div>
</amp-iframe>

4.0 | oEmbed

This option provides a URL that conforms to the oEmbed standard. This is useful for platforms that automatically generate an embed when you paste a link (like WordPress, Slack, or Medium).

• How to use: Select “oEmbed” from the “Embed type” dropdown and copy the resulting URL. Paste this URL into a supported platform’s editor.

5.0 | URL

This provides a simple, direct link to a hosted player page for your video. This is best for sharing the video directly (e.g., in an email or social media post) or as a source link for other systems.

• How to use: Select “URL” from the “Embed type” dropdown and copy the link.

6.0 | JSON

This option provides a link to a JSON data file. This is an advanced, developer-focused option. The JSON file contains metadata and details about the video (like its title, description, and source files) that can be used to programmatically integrate the video into a custom application.

• How to use: Select “JSON” from the “Embed type” dropdown and copy the URL to use in your application’s code.

7.0 | SCORM

This option is for e-learning. It provides a SCORM-compliant package for use in a Learning Management System (LMS) like Moodle, Blackboard, or Cornerstone. This allows the video to be inserted as a trackable course item.

• How to use: Select “SCORM” from the “Embed type” dropdown. This will likely provide a .zip file or a link to integrate with your LMS.

8.0 | LTI

(Learning Tools Interoperability) This is another standard for e-learning. Like SCORM, this option is used to integrate your video content as a tool or resource within a compatible Learning Management System (LMS).

• How to use: Select “LTI” from the “Embed type” dropdown and use the provided configuration details to add the video to your LMS.