How to customize the free preview popup when the free preview is completed

Work with our access control feature to enable a free preview on your videos & show a popup when the free preview is completed. Learn how you enable a free preview on your videos and how you can customize the look & feel of the pop-up on the frontend

Step 1: Enable a free preview for a video

1.1. Create an access control profile for free preview videos

1. Go to settings → Access control → Add profile
2. Scroll down to 'Advanced Security and Pay per View → Enable Secure video with server side secret and enable Allow free preview of...
3. Save the profile

1.2. Select a video where you want to enable the new access control profile (free video)

1. Go through your list of videos in the content library and select a video entry where you want to enable the preview. Alternatively you can enable the free preview functionality on the default access control profile to enable the free preview automatically on all the videos.
2. Click save. That's it. 

Step 2: Customize the look & feel of the free preview popup

https://www.ekhartyoga.com/classes/1472/small-output-big-benefit

On this page we optionally have a video and a trailer depending on the subscription status. We hook up here on an event playerReady to display the play button as soon as the main video or the trailer can actually play.

(function ($) {
  "Use strict";
  var $header = null, $movie =null, $trailer = null, movie_player = null, trailer_player = null, $subscribe = null,
  init = function () {
    $header = $('#movie-header');
    $subscribe = $('#subscribe-or-login');
    $movie = $('#movie .player');
    $trailer = $('#trailer .player');
    $('#subscribe-or-login .close').on('click', hideRegistration);
      if ($('#movie').length != 1) {
          $('#play-movie').toggleClass('ready').on('click', showRegistration);
      }
  },
  hideRegistration = function(){
    $subscribe.fadeOut(300);
  },
  showRegistration = function () {
    $subscribe.fadeIn(300);
  },
  playMovie = function () {
    $(".featured-banner #trailer").hide();
    $header.fadeOut(300);
     $(".featured-banner .movie-position").css("position","relative");
    $(".featured-banner .movie-position #movie").parent().css("z-index","0");
    movie_player.sendNotification('play');
    $('body').addClass('playing');
  },
  playTrailer = function (){
    $('#movie').hide();
     $(".featured-banner .movie-position").css("position","relative");
    $(".featured-banner #trailer").parent().css("z-index","0");
    $header.fadeOut(300);
    trailer_player.sendNotification('play');
    $('body').addClass('playing');
  },
  playbackEnded = function(){
    $(".featured-banner #trailer").parent().css("z-index","-1");
    $(".featured-banner .movie-position #movie").parent().css("z-index","-1");
    $(".featured-banner .movie-position").css("position","absolute"); 
    $header.fadeIn(300);
    $(".featured-banner #trailer").show();
    $('#movie').show();
  },
  playerLoaded = function(widgetId){
    var $widget = $('#'+widgetId);
    if ( $widget.closest('#movie').length > 0 ){
      movie_player = $widget[0];
      movie_player.addJsListener('playerReady',movieReady);
    }else{
      trailer_player = $widget[0];
      trailer_player.addJsListener('playerReady',trailerReady);
    }
    $widget[0].addJsListener('ended',playbackEnded);
  },
  movieReady = function(){
    $('#play-movie').toggleClass('ready').on('click', playMovie);
    if ( getQueryVariable('autoplay') === 'yes'){
        playMovie();
    }
  },
  trailerReady = function(){
    $('#play-trailer').toggleClass('ready').on('click', playTrailer);
  },
  getQueryVariable = function(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return '';
  };
  // Kaltura kwidget player ready callback
  window.jsCallbackReady = playerLoaded;
  $(init);
})(window.jQuery);