Script tag embed
The easiest way to embed your media or channel into a website is to use the "script embed".
For media, you can obtain this script tag by navigating to the detail page of the media you wish to embed, clicking on the DISTRIBUTION tab, then copying the presented embed code into your HTML document in the location you want it to display.
For channels, and collections, you can similarly copy the script from the respective DISTRIBUTION tabs.
If you haven't created a player your embed script will look something like this:
This will present the media using the "System Default" player, which uses a simple black and white design (as shown at the top of the Media Detail page).
If you have created a player you will have a "Player:" dropdown which will modify the script with a
playerKey. See the Customising the player for the how, and why of creating players.
If you have a player selected your embed script will look something like this:
If you have a default player it will appear in the list marked with “(Default)“, this will be the player used if none is selected/provided.
For more control you can place the Player Embed API on the page and programatically 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:
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.
The public key of the media or channel you wish to embed.
(optional if called from within
<div class="somebox"> <script> $v.player.embed('s0m3m3d14'); </script> </div>
The player will render in
Player settings object. This can be used to specify the player key (
If target is omitted, this can be the second argument. For example:
The iFrame method is designed to allow embedding of the player into environments that don't allow
script tags, like many CMSs. Unlike the other options, it doesn't allow API access to the player, and it may require some manual editing to adjust width and height depending on enabled player features.
An iFrame embed looks something like this:
<iframe style="width:640px; height:360px; border:none; overflow: hidden" src="https://publish.viostream.com/player/iframe/s0m3m3d14?playerKey=s0m3p14y3r" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Modifying the "Width:" option will update the
width:640px; height:360px; portion of the above HTML, to maintain an aspect ratio of 16:9. If the rendered player and its features don't match those dimensions they may be cut off, or compressed. To fix this, change the
height styles until they player renders as desired.
The player key selection works in the same manner as script tag embed.
Legacy API and embed migrations
Please see the FAQ section of Upgrading to the new Viostream player for more information on how player migration works.