Calls To Action

Calls To Action Triggered From Video

OptinPlayer is capable of using different events from the player as well as user interaction events to trigger any custom content in a floating layer at any location, or to run any user defined JavaScript. This section gives the steps needed to trigger a floating layer from the video.


1. Add a custom instance

If you already have a video embedded then now add another instance, this time of content type 'custom' as in this example which can be copy-pasted:

new oplayer('myCustom1').initialize(
   {
      'content' : 'custom',
      'display' : 'link',
      'source' : 'oplayer/user/myOptin.html',
      'width' : 380,
      'height' : 290,
      'location' : 1,
   }
);

Note that this is a minimum set of options - for all options and full details see the links on the left.

1. 'display' is set to 'link' not 'auto'
2. 'source' must point to your custom content
3. 'location' is 1 which is at the center
4. Anchor the layer to a specific page element using the 'anchored' property.
5. The layer will follow page-scroll, change this by setting the 'scrolling' property to false.



2. Connect the video and custom instances

There are many ways to trigger the custom content from the video such as from the timeline, from a click on the video, at the end of play and more. This code snippet shows how to do this from the timeline.

new oplayer('myVideo').initialize(
   {
      'content' : 'oplayer',
      'type' : 'embed',
      'flash' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',
      'html5' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',
      'width' : 570,
      'height' : 240
      'playEventTime' : 15.50
      'playEvent' : 'op.display("myCustom1")'
   }
);

Simply add 2 properties to your player instance:

1. 'playEventTime' is set to the time in seconds at which to trigger
2. 'playEvent' specifies the command to run

The 'playevent' command can be anything from the JavaScript Player and Layer API or it can be a set of JavaScript commands defined by the user. In this snippet it simply displays the custom layer that was defined above.



Back to top