Video popup

Here's a really easy way to have a video pop up after a visitor clicks a button. First, add a button to a page and give it a custom name of "video-button". In the "On click" panel in the button sidebar, select the "Open URL" option and paste in a Youtube or Vimeo URL. Publish your page.

Deselect all components (ESC) and navigate to the Page tab found in the right sidebar. Create a new snippet, name it "Video popup JS", and paste in the following code:

<script>!function(e,t){"use strict";"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.MediaBox=t()}(this,function(){"use strict";var e=function(t,o){var i={autoplay:"1"},o=o||0;return this&&this instanceof e?!!t&&(this.params=Object.assign(i,o),this.selector=t instanceof NodeList?t:document.querySelectorAll(t),this.root=document.querySelector("body"),void this.run()):new e(t,o)};return e.prototype={run:function(){Array.prototype.forEach.call(this.selector,function(e){e.addEventListener("click",function(t){t.preventDefault();var o=this.parseUrl(e.getAttribute("href"));this.render(o),this.events()}.bind(this),!1)}.bind(this)),this.root.addEventListener("keyup",function(e){27===(e.keyCode||e.which)&&this.close(this.root.querySelector(".mediabox-wrap"))}.bind(this),!1)},template:function(e,t){var o;for(o in t)t.hasOwnProperty(o)&&(e=e.replace(new RegExp("{"+o+"}","g"),t[o]));return e},parseUrl:function(e){var t,o={};return(t=e.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=)([^#\\&\\?]*).*/))?(o.provider="youtube",o.id=t[2]):(t=e.match(/https?:\\/\\/(?:www\\.)?vimeo.com\\/(?:channels\\/|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|)(\\d+)(?:$|\\/|\\?)/))?(o.provider="vimeo",o.id=t[3]):(o.provider="Unknown",o.id=""),o},render:function(e){var t,o,i;if("youtube"===e.provider)t="<https://www.youtube.com/embed/"+e.id;else{if("vimeo>"!==e.provider)throw new Error("Invalid video URL");t="<https://player.vimeo.com/video/>"+e.id}i=this.serialize(this.params),o=this.template('<div role="dialog" aria-hidden="false"><div role="document" tabindex="0"><span id="mediabox-esc" aria-label="close" tabindex="1"></span><iframe src="{embed}{params}" frameborder="0" allowfullscreen></iframe></div></div>',{embed:t,params:i}),this.lastFocusElement=document.activeElement,this.root.insertAdjacentHTML("beforeend",o),document.body.classList.add("stop-scroll")},events:function(){var e=document.querySelector(".mediabox-wrap"),t=document.querySelector(".mediabox-content");e.addEventListener("click",function(t){(t.target&&"SPAN"===t.target.nodeName&&"mediabox-close"===t.target.className||"DIV"===t.target.nodeName&&"mediabox-wrap"===t.target.className||"mediabox-content"===t.target.className&&"IFRAME"!==t.target.nodeName)&&this.close(e)}.bind(this),!1),document.addEventListener("focus",function(e){t&&!t.contains(e.target)&&(e.stopPropagation(),t.focus())},!0),t.addEventListener("keypress",function(t){13===t.keyCode&&this.close(e)}.bind(this),!1)},close:function(e){if(null===e)return!0;var t=null;t&&clearTimeout(t),e.classList.add("mediabox-hide"),t=setTimeout(function(){var e=document.querySelector(".mediabox-wrap");null!==e&&(document.body.classList.remove("stop-scroll"),this.root.removeChild(e),this.lastFocusElement.focus())}.bind(this),500)},serialize:function(e){return"?"+Object.keys(e).reduce(function(t,o){return t.push(o+"="+encodeURIComponent(e[o])),t},[]).join("&")}},e}),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e,t){"use strict";if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var o=Object(e),i=1;i<arguments.length;i++){var r=arguments[i];if(null!=r)for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(o[n]=r[n])}return o},writable:!0,configurable:!0});</script>  <script> 	function videoPopup() { 		var videoLinks = document.querySelectorAll('[id*="video-button"]'); 		videoLinks.forEach(function(videoLink) { 			videoLink.classList.add('mediabox'); 		})  		MediaBox('.mediabox'); 	} 	window.addEventListener('DOMContentLoaded', videoPopup); </script>

Change the "Place in" option and set it to <body>. Next, create another snippet, name it "Video popup CSS", and paste in the following code:

<style>.stop-scroll{height:100%;overflow:hidden}.mediabox-wrap{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.8);top:0;left:0;opacity:0;z-index:999;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:mediabox;animation-name:mediabox}@-webkit-keyframes mediabox{0%{opacity:0}100%{opacity:1}}@keyframes mediabox{0%{opacity:0}100%{opacity:1}}.mediabox-content{max-width:853px;display:block;margin:0 auto;height:100%;position:relative}.mediabox-content iframe{max-width:100%!important;width:100%!important;display:block!important;height:480px!important;border:none!important;position:absolute;top:0;bottom:0;margin:auto 0}.mediabox-hide{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:mediaboxhide;animation-name:mediaboxhide}@-webkit-keyframes mediaboxhide{0%{opacity:1}100%{opacity:0}}@keyframes mediaboxhide{0%{opacity:1}100%{opacity:0}}.mediabox-close{position:absolute;top:0;cursor:pointer;bottom:528px;right:0;margin:auto 0;width:24px;height:24px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAMvSURBVHja7Js9aBRBFMd/d1lPY6FiJVjY+Fkoxl7wA1Q0prQRS6tgoZV2MWIRRVHUUq3U+JnESrS2sBXBzipREWMlATXwt8gFznC5nd15M7Nn8uC45nZnfr/dY96+N1uTxFKOOks8lgUU/H2t4tJqIQUcAiaBGeBymcECRgO4B/wBPgJ9zkdKcvkclfRL/8ZtSTXH40N+GpLGF8zth6Q9Lse7DHCsDXxVJLSDLyQhb4B+Sb/VOVJJ6ATfKqGvrIDjDvCpJLjAz8d0JwmLDTBQAD62hIakiYJzm5a021VAfwn4WBLKwLdK2JUnIJP0XX4RSoIP/Hy8W3jeepv1dL3nmjwI3DLOExrAU2DA8zwb8xKhGeCuwYQtJTSAZwbwAHdcEqFM0mPZhO/foSHppdFcrraby2IDV0FCcPi8PCClhCjwLplgCgkrDeGv5I3pcjViSogK7yogloTo8EUEhJaQBL6oAGsJ9yVtkrRD0qsU8JKolagKZ8AD4ETFymFXgPOAQpXE5mMWOAk86XZ4n6pwlSSUhvcti1dBghe8RV8gpYQRX3irxkgKCSPABV94y85QTAlm8NatsRgSTOGBUnmAS57w3KiA0Ro3gHOW8KEEAOwE3hvfXWubFauu6A6vCND07OmW9viq5vpsGT3AtRAN2XoA+BfAwQBiTweoNpMZw48BRwKuAoPN7zNVWwZjwAfpO9S7DN5cQmYAPw4cTvAsYPJ3qHcpvNmdUO9ieBMJZQT0AhMVgfeWUC8BP87cjjHfuA6sATY0c4c0EgpUUHslvTaq3l5aUL1N1oarAnxSCVWBTyYhJvyw41XJJI3GkpAH/yYyfHQJi01gdUL4qBKqCh9NQrtBx4wGvGi0XS6T9MhoTkN5AtZVDN5awlTePsGfwDfPjGwYGDKu3s4Cp4BRz/N8cskED0iaqciVt7wTvkra5roKlJEQGt5HwhdJ24vmAUUkDEV+VyCT9NBxbp/bXXnXTNBFQmz4IhI6wrs+C+zvICEVvIuEKUlbrZ4G97WRkBq+k4RJSVusd4ntlfSheVudrQh8q4SbmntH6K2kzSF3if1Xsfzq7LKAJR5/BwCdAQBJn4egPgAAAABJRU5ErkJggg==) no-repeat;background-size:24px 24px}.mediabox-close:hover{opacity:.5}@media all and (max-width:768px){.mediabox-content{max-width:90%}}@media all and (max-width:600px){.mediabox-content iframe{height:320px!important}.mediabox-close{bottom:362px}}@media all and (max-width:480px){.mediabox-content iframe{height:220px!important}.mediabox-close{bottom:262px}} </style>

Leave this snippet placed in the <head>. After adding both snippet to your page, visit the live version of your page. You should see a video pop up and start playing. The great thing about this snippet is that you can style and move the button around in Makeswift without having to touch any of the snippet code.

To have multiple video button links on the same page, give each button the same custom name and add a number, like "video-button-2" or "video-button-3".