Skip to content

Instantly share code, notes, and snippets.

@NathanQ
Last active November 13, 2017 15:01
Show Gist options
  • Save NathanQ/3665271932d27a107e42 to your computer and use it in GitHub Desktop.
Save NathanQ/3665271932d27a107e42 to your computer and use it in GitHub Desktop.
Squarespace Add Popup Video To Background Image Modules using YUI, not jQuery
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