Embedding your media

Written by Luisa Miranda

Last published at: June 26th, 2020

Viostream provides a variety of embed methods so that you can embed you media almost anywhere!

Script embeds

For most basic embeds, the best option is to use a script embed. This will use javascript to embed a responsive Player directly onto your page, is suitable for desktop, mobile and tablet devices, and supported by all modern browsers.

Use a script embed for a media asset

  1. From the media library, locate the asset you wish to embed and click on its title.
  2. Click the Distribution tab.
  3. (optional) choose a custom player and start time
  4. Click the Copy code button to copy the embed code to your clipboard
  5. Paste the embed code into your web publishing software.




‍  

Use a script embed for a Channel

  1. From the channel library, locate the Channel you wish to embed and click on its title.
  2. Click the Distribution tab.
  3. (optional) choose a custom player.
  4. Click the Copy code button to copy the embed code to your clipboard.
  5. Paste the embed code into your web publishing software.



‍ 


Iframe embeds

In some circumstances it may not be possible to use a script embed due to limitations of your web publishing software or other restrictions. In this case, an iframe embed may be used instead. 

Iframe embeds are not responsive by nature and should only be used if a script embed is unavailable.

Use an iframe embed for a media asset

  1. From the media library, locate the asset you wish to embed and click on its title.
  2. Under the Embed section, click the Iframe tab.
  3. (optional) choose a custom player and start time.
  4. Click the Copy code button to copy the embed code to your clipboard.
  5. Paste the embed code into your web publishing software.

‍   

Use an iframe embed for a Channel

  1. From the channel library, locate the Channel you wish to embed and click on its title.
  2. Click the Distribution tab.
  3. Under the Embed section, click the Iframe tab.
  4. (optional) choose a custom player and set the width of the iframe.
  5. Click the Copy code button to copy the embed code to your clipboard.
  6. Paste the embed code into your web publishing software.



‍ 

 

Make an iframe embed responsive

A responsive iframe will render well across a variety of devices and screen sizes.

In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps:

  1. Get the iframe embed code and paste in into your HTML page.
  2. Set the height and the width attributes of the iframe tag to 100%
  3. Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
  4. Add a div container around the iframe tag as it is shown by the following sample code. The value of the 'padding-bottom' parameter is based on the aspect ratio of the content (in case of a 16:9 video the calculation is 9/16 = 0.5625)

Your final html code should look similar to the below:

 <div id="Container"
     style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
     <iframe id="ViostreamIframe" width="100%" height="100%" src="https://publish.viostream.com/player/iframe/s0m3m3d14?playerKey=s0m3p14y3r" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
</div>
‍ 

 


API embeds

Advanced users can take advantage of the rich features available via the Viostream API by using an API embed.


API embed

Requirement

- Only admin users can access this section

For more control, you can place the Player Embed API on the page and programmatically control embedding. First, you will need to obtain your Account Key by navigating to account management. Then place the following script in the <head> of  your HTML document:

<script src="//publish.viostream.comm/player/api/VC-ACCOUNTKEY"></script>

Replace VC-ACCOUNTKEY with your key. It is important you provide this, as many features will not work, or behave unpredictably without it.

This will add the $v.player.embed(publicKey [,target][,options]) function to your page.

Parameter Description
publicKey The public key of the media or channel you wish to embed.
target:

(optional if called from within body)

The id of the container (e.g. <div>) into which you wish to place the player. If you don't provide an id, the embed code will attempt to add the player to page in place of the calling script. For example:
<div class="somebox"> 
    <script> $v.player.embed('s0m3m3d14'); </script>
</div>
The player will render in <div class="somebox">. However, this will not work if the calling script is in the <head>, thus a target must be supplied in this case.
options:

(optional)


Player settings object. This can be used to specify the player key, and to override any of the supported player settings.

{playerKey: 's-0m3p14y3r'}

If the target is omitted, this can be the second argument. For example:

$v.player.embed('s0m3m3d14', { playerKey:'s-0m3p14y3r' });
$v.player.embed('s0m3m3d14', 'myplayer', { playerKey:'s-0m3p14y3r' });