Last active
December 7, 2015 22:09
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* --- 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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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