Skip to content

Instantly share code, notes, and snippets.

@ericakfranz
Last active December 7, 2015 22:09
Show Gist options
  • Save ericakfranz/27cad399bb837e2cc92e to your computer and use it in GitHub Desktop.
Save ericakfranz/27cad399bb837e2cc92e to your computer and use it in GitHub Desktop.
Load a div containing a YouTube video set to autoplay behind our manually-triggered optin just before the optin shows. We’ll load the overlay only on desktop browsers and trigger the overlay to close with the ESC key.
/* --- 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;
}
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();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment