Embedding a media clip


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

To start, select a media clip from the Media Library and head over to the “Embed” tab.

embedding a media clip

1.0 | Javascript

Select a playout that the player should use on the webpage. Select JavaScript from the dropdown menu and copy the embed code that is generated.

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

What you see in the embed code

The yellow is the name of the publication
The
blue is the name of the playout used
The
green is the media clip number

2.0 | iFrame

To embed using iframe, pick a playout and select the iFrame option from the dropdown menu. Copy the embed code that is generated.

Please note that using an iframe may is suboptimal for 360 video and fullscreen capabilities. We therefore recommend using Javascript.

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>
Responsive design

The best way to make the player scale in a responsive design when using an iframe is setting its width and height to ‘100%’ and wrapping it inside a <div> that you control the dimensions of.

3.0 | AMP

To embed your media clip on an AMP page, pick a playout and select the AMP option in the dropdown menu. Copy the embed code that is generated.

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>
Updated on October 6, 2021

Was this article helpful?

Related Articles