JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<button data-modal="#modal-youtube">YouTube</button> 
<button data-modal="#modal-vimeo">Vimeo</button> 
<button data-modal="#modal-html5-video">HTML5</button>

<div class="modal" data-modal-window id="modal-youtube">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/CRS6yABFKBo" frameborder="0" allowfullscreen></iframe>
	<button data-modal-close>Close</button>
</div>

<div class="modal" data-modal-window id="modal-vimeo">
	<iframe src="http://player.vimeo.com/video/3187285060" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	<button data-modal-close>Close</button>
</div>

<div class="modal" data-modal-window id="modal-html5-video">
	<video>
    	<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    	<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
	</video>
	<button data-modal-close>Close</button>
</div>

CSS

/*! Modals v10.1.2 | (c) 2017 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/modals */
.modal{background-color:#fff;border:.0725em solid #e5e5e5;border-radius:.0725em;box-shadow:0 .25em .5em rgba(0,0,0,.3);display:none;max-width:100%;padding:.5em 1em;visibility:hidden;z-index:2}@media (min-width:40em){.modal{max-width:98%}}.modal.active{display:block;height:100%;left:0;max-height:100%;overflow:auto;position:fixed;right:0;top:0;visibility:visible;-webkit-overflow-scrolling:touch}@media (min-width:30em){.modal.active{height:auto;left:3%;margin-left:auto;margin-right:auto;right:3%;top:50px}}@media (min-width:40em){.modal.active{left:8%;right:8%}.modal.active.modal-medium{width:35em}.modal.active.modal-small{width:25em}}.modal:focus{outline:none}.modal-bg{background-color:#272727;bottom:0;position:fixed;left:0;opacity:.9;right:0;top:0;z-index:1}.close{color:gray;cursor:pointer;float:right;font-weight:700;font-size:1.5em;text-decoration:none}.close:hover{color:#5a5a5a;cursor:pointer}

JavaScript

/*! Modals v10.1.2 | (c) 2017 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/modals */
!(function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.modals=t(e)})("undefined"!=typeof global?global:this.window||this.global,(function(e){"use strict";var t,o,n,l={},c="querySelector"in document&&"addEventListener"in e&&"classList"in document.createElement("_"),r="closed",d={selectorToggle:"[data-modal]",selectorWindow:"[data-modal-window]",selectorClose:"[data-modal-close]",modalActiveClass:"active",modalBGClass:"modal-bg",preventBGScroll:!0,preventBGScrollHtml:!0,preventBGScrollBody:!0,backspaceClose:!0,stopVideo:!0,callbackOpen:function(){},callbackClose:function(){}},a=function(){var e={},t=!1,o=0,n=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],o++);for(;o<n;o++){var l=arguments[o];!(function(o){for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t&&"[object Object]"===Object.prototype.toString.call(o[n])?e[n]=a(!0,e[n],o[n]):e[n]=o[n])})(l)}return e},s=function(e,t){for(Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),o=t.length;--o>=0&&t.item(o)!==this;);return o>-1});e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},i=function(e,t){if(t.stopVideo&&e.classList.contains(t.modalActiveClass)){var o=e.querySelector("iframe"),n=e.querySelector("video");if(o){var l=o.src;o.src=l}n&&n.pause()}},u=function(){var e=document.createElement("div");e.style.visibility="hidden",e.style.width="100px",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var...