css 在optin显示之前，将包含YouTube视频集的div加载到我们手动触发的optin后面进行自动播放。我们将加载重叠

Posted 2021-05-13

jQuery(document).ready(function($){
    var loading = function() {

      // add the overlay with video embed code to the page
      var over = '<div id="overlay">' +
        '<iframe width="1680" height="945" src="//www.youtube.com/embed/KNn0ELpeRMI?autoplay=1" frameborder="0" allowfullscreen></iframe>' +
        '<div id="close-overlay">Press ESC to Close</div>' +
        '</div>';

      // output overlay to the body
      $(over).appendTo('body');

      // press ESC to close the overlay
      $(document).keyup(function(e) {
        if (e.which === 27) {
          $('#overlay').remove();
        }
      });
    };

    // detect mobile browsers
    var isMobile = {
      Android: function() {
        return navigator.userAgent.match(/Android/i);
      },
      BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
      },
      iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
      },
      Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
      },
      Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
      },
      any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
      }
    };

    // Finally, use the OM Event 'OptinMonsterBeforeShow' to trigger the function loading();
    $(document).on('OptinMonsterBeforeShow', function(event, data, object){
      if( ! isMobile.any() ) {
        loading();
      }
    });
});

/* --- CSS to position the video overlay --- */
#overlay {
    position: fixed;
    left: 0;
    top: -90px;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 500%;
    background: #000;
}
#overlay iframe {
    opacity: 0.8;
}
#close-overlay {
    position: fixed;
    z-index: 99999;
    top: 50px;
    right: 20px;
    background-color: #000;
    color: #fff;
    padding: 10px;
}