How do I embed multiple videos onto a single page?

Important

This article assumes you have already read and understood our article on How do I use my embed code?

This is meant for advanced users/developers only!

Embedding multiple videos onto a single page is possible using the Asset TV embed library.

HTML Setup

You will need to create a series of divs, each with a different id, one for each video you wish to embed.

<div id="video1"></div>
<div id="video2"></div>
<div id="video3"></div>

These can then be placed into the HTML of your webpage in the section where the videos are required.

Javascript Setup

You will then need to customise the embed script to accommodate the three divs by adding each individual video as an object within the media array. A single object denotes a video. Your secure code is a compulsory value should be added to the embed script. An example of this can be seen below.

<script>
   var player = new Player({
      secureCode: '###########',
      media: [
         {
           containerId: 'video1',
           videoId: ######
         },
         {
           containerId: 'video2',
           videoId: ######
         },
         {
           containerId: 'video3',
           videoId: ######
         }
      ]
   });
</script>

You can still take advantage of the extra player features by adding the required options from the code found here to the relevant player, for example:

<script>
   var player = new Player({
      secureCode: '###########',
      media: [
         {
           containerId: 'video1',
           videoId: ######,
           autoplay: true,
           skipTo: 30;
         size: {
           width: '852',
           height: '480'
           }
         },
         {
           containerId: 'video2',
           videoId: ######,
           autoplay: false,
         size: {
           width: '640',
           height: '360'
           }
         },
         {
           containerId: 'video3',
           videoId: ######,
           autoplay: false
      ]
   });
</script>

The example above would embed three players onto the page. The first would be larger than the other two and will automatically start playing from the 30 second mark once loaded. The other two players will start from the beginning of their respective videos but user interaction is required to start playing.

Info

Remember you will need to include our Embed library in the head of every page you wish to embed videos.

<script type="text/javascript" src="//platform.asset.tv/embed.js"></script>