Viostream provides a variety of embed methods so that you can embed your 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. It is suitable for desktop, mobile and tablet devices, and supported by all modern browsers.
Use a script embed for a Media Asset
- From the Library, locate the asset you wish to embed and click on its title
- Click the Embed button underneath the player preview
- (optional) choose a custom Player
- Click the Copy code button to copy the embed code to your clipboard
- Paste the embed code into your web publishing software.
Use a script embed for a Channel
- From the Channels Library, locate the Channel you wish to embed and click on its title
- Click the Embed button underneath the Player preview
- (optional) choose a custom Player
- Click the Copy code button to copy the embed code to your clipboard
- 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
- From the Library, locate the asset you wish to embed and click on its title
- Click the Embed button underneath the Player preview
- Click the dropdown that says script and select iframe
- (optional) choose a custom Player
- Click the Copy code button to copy the embed code to your clipboard
- Paste the embed code into your web publishing software
Use an iframe embed for a Channel
- From the Channels Library, locate the Channel you wish to embed and click on its title
- Click the Embed button underneath the Player preview
- Click the dropdown that says script and select iframe
- (optional) choose a custom Player
- Click the Copy code button to copy the embed code to your clipboard
- 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:
- Get the iframe embed code and paste in into your HTML page
- Set the height and the width attributes of the iframe tag to 100%
- Change the CSS position of the iframe tag to ‘absolute’ and set the left and top CSS parameters to ‘0’
- 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. Please consult the Player API documentation for more information.
