Last active
November 13, 2017 15:01
-
-
Save NathanQ/3665271932d27a107e42 to your computer and use it in GitHub Desktop.
Squarespace Add Popup Video To Background Image Modules using YUI, not jQuery
This file contains 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
YUI().use('node', 'event', function (Y) { // use squarespace's preloaded YUI instead of loading jQuery just to make a popup. add this to the footer of your page in a snippet. | |
var videoLink = ''; // link your links to their videos in the content. | |
var top = pageYOffset; | |
var body = Y.one('body'); | |
var obj; | |
var doClose = function(e) { | |
e.preventDefault(); | |
var videoContent = document.getElementById('videoContent'); | |
videoContent.parentNode.removeChild(videoContent); | |
Y.one('body').removeClass('sqs-lightbox-open'); | |
return false; | |
}; | |
var doVideo = function(e) { | |
Y.one('body').addClass('sqs-lightbox-open'); // squarespace thing which keeps user from scrolling. meh. | |
top = pageYOffset; // set the top of the videoContent popup to the top of the screen. | |
obj = Y.Node.create('<div class="yui3-lightbox2" id="videoContent" style="position:absolute;top:'+top+'px;left:0;width:100%;height:100%;z-index:9999909; opacity:1;background:rgba(0,0,0,0.6)"><div class="sqs-lightbox-slideshow" style="opacity:1;"><div class="sqs-lightbox-padder"><iframe src="'+videoLink+'" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position:absolute;top:0;left0;width:100%;height:100%;z-index:2;"></iframe></div><a class="sqs-lightbox-close"></a></div></div>'); | |
body.insert(obj); | |
closer = document.getElementsByClassName('sqs-lightbox-close'); | |
closer = Y.one('.sqs-lightbox-close'); | |
closer.on('click', doClose); | |
}; | |
Y.all('.page-desc a').each(function(node){ // this is what I needed to utilize the links. Yours may/will be different. | |
node.on('click', function(e){ | |
e.preventDefault(); | |
videoLink = (node.getAttribute("href")); | |
doVideo(e); | |
return false; | |
}) | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment