3 easy steps to integrate in-stream advertising with Fluid Player

ExoClick’s in-stream video ad format works with all major HTML5 video players. Here we show you how to integrate the format using Fluid Player, a free, open source, fully customisable  HTML5 video player. It is lightweight, easy to integrate and has advanced VAST capabilities.

If you are a publisher showing video content on your site and want to take advantage of monetising your content with video advertising, you can visit Fluid Player’s website here for full details of its capabilities. Because it is open source developers are adding new features to it all the time.

Here are 3 easy steps to integrate in-stream advertising with Fluid Player:

Step 1 – Test on your website

Here is a simple piece of code that you can copy and paste into your site to test out Fluid Player.

Simple Fluid Player code:

<link rel="stylesheet" href="http://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>

<script src="http://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>

<video id="video-id" style="width: 640px; height: 360px;">

<source src="http://cdn.fluidplayer.com/videos/valerian-720p.mkv" title="720p" type="video/mkv">

</video>

<script>

var myFP = fluidPlayer('video-id');

</script>

Step 2 – Set up your in-stream ad zone within ExoClick’s admin panel

First log into your admin panel and follow the instructions in this FAQ.

Step 3 – In-stream integration

Once your In-stream zone has been created within your admin panel it is time to integrate the format into Fluid Player. Here is the code. Note you can select preRoll, midRoll and postRoll, in this code example we will use preRoll. You will also need to insert your idzone generated when you set up the ad zone in your admin panel, so in this code replace idzone=2366423 with your own idzone.

In-stream integration code:

<link rel="stylesheet" href="http://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
<script src="http://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script> 
		
<video id='video-id' style="width: 640px; height: 360px;">
	<source src="http://cdn.fluidplayer.com/videos/valerian-720p.mkv" title="720p" type="video/mkv">
</video>

<script>
	var myFP = fluidPlayer(
		'video-id',
		{
		  vastOptions: {
		   "adList" : [
			{
			"roll" : "preRoll",
			"vastTag" : "https://syndication.exoclick.com/splash.php?idzone=2366423"
			}
		   ]
		  }
		}
	);
</script>

There are additional advanced integrations that you can find here.

Fluid Player supports a number of configuration parameters which include:

• In-stream
• In-video banners
• HTML banners
• Ad text
• Ad CTA text

More detailed documentation is available here.

For a demo of some of the above ad formats click the play button on Fluid Player here.