Javascript Email Opt-in Form Event On Youtube Api

I am using youtube API to call a video inside a lightbox. What I am trying to achieve is to add an email opt-in form as soon the video ends. I have managed to call the email form a

Solution 1:

To answer your question: "How do I bring the contact form to the front of lightbox/video?" You need to increase the css z-index property of the form. Here is a way you could do that. Figure out what the current highest z-index is on the page, then just increment that value. Flash had a method called "getNextHighestDepth". We can do something similar. !WARNING: If your page is heavy in HTML, this technique could be slow.

functionLoops(collection, fn) {
  /**
   * @method generic reuseable loop with callback for specific actions
   * @param {Array|NodeList|HTMLCollection|etc.} collection
   * @param {function} fn - @callback
   */'use strict';
  var i;

  if ((collection.item && collection.length) || collection instanceofArray || collection instanceofElement || collection.elements || collection.jquery) {
    i = collection.length || collection.childNodes.length;
    if (i > -1) {
      do {
        if (collection[i] !== undefined) {
          fn(i);
        }
      } while (--i >= 0);
    }
  } else {
    thrownewError('"collection" (' + collection + ') is not valid. It should be a single element or an array or have an "item" method and a "length" property. Form controls collections are also valid');
  }
};


varGetNextHighestDepth = function(incrementBy) {
  /**
   * @returns {number} highest
   * @method gets highest z-index and adds 10
   * or adds number specified in parameter
   * @todo make return value 'live'. zindex returns a static value;
   */'use strict';

  var items = document.getElementsByTagName('*'),
    highest = 0;

  Loops(items, function(i) {
    // zindex returns a string that must be converted to a numbervar zindex = getComputedStyle(items[i], null).getPropertyValue('z-index');

    if ((zindex > highest) && (zindex !== 'auto')) {
      if (typeof incrementBy === 'number') {
        highest = parseInt(zindex, 10) + incrementBy;
      } else {
        highest = parseInt(zindex, 10) + 10;
      }
    }
  });
  return highest;
};




// Fires whenever a player has finished loadingfunctiononPlayerReady(event) {
  event.target.playVideo();
}

// Fires when the player's state changes.functiononPlayerStateChange(event) {
  // Go to the next video after the current one is finished playingif (event.data === 0) {
    //   $.fancybox.next();

    el = document.getElementById("overlayContactForm");
    el.style.zIndex = GetNextHighestDepth();
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";



  }
}

// The API will call this function when the page has finished downloading the JavaScript for the player APIfunctiononYouTubePlayerAPIReady() {

  // Initialise the fancyBox after the DOM is loaded
  $(document).ready(function() {
    $(".fancybox")
      .attr('rel', 'gallery')
      .fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        nextEffect: 'none',
        prevEffect: 'none',
        padding: 0,
        margin: 50,
        beforeShow: function() {
          // Find the iframe IDvar id = $.fancybox.inner.find('iframe').attr('id');

          // Create video player object and add event listenersvar player = newYT.Player(id, {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
      });
  });

}