Preview 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Biryani:200,400,600,900|Quicksand:300,400|PT+Sans+Narrow:700|Montserrat:300,700" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://use.typekit.net/nbs4kuq.css">
    <link rel="stylesheet" href="https://use.typekit.net/exq6vtq.css">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
</head>

<body class="theme-corporate" data-glow="0, 111, 238">
    <div class="page-container theme-corporate" data-glow="0, 111, 238">

        <div class="modal">
            <div class="modal-inner has-shadow">
                <button data-modal-close class="modal-close">
    	<svg id="nav-trigger" class="nav-trigger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
	  		<path id="cross" d="M5.65 7.443L7.064 6.03l10.48 10.48-1.415 1.414zM5.644 16.509l3.931-3.932 1.414 1.415-3.931 3.931zM12.194 9.956l3.931-3.932L17.54 7.44l-3.931 3.931z"/>
		</svg>
	</button>
                <div class="modal-content"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
    <script src="/dist/bundle.js" /></script>
    <script>
        // Only run if ResizeObserver is supported.
        if ('ResizeObserver' in self) {
            // Create a single ResizeObserver instance to handle all
            // container elements. The instance is created with a callback,
            // which is invoked as soon as an element is observed as well
            // as any time that element's size changes.
            var ro = new ResizeObserver(function(entries) {
                // Default breakpoints that should apply to all observed
                // elements that don't define their own custom breakpoints.
                var defaultBreakpoints = {
                    SM: 384,
                    MD: 576,
                    LG: 768,
                    XL: 960
                }
                entries.forEach(function(entry) {
                    // If breakpoints are defined on the observed element,
                    // use them. Otherwise use the defaults.
                    var breakpoints = entry.target.dataset.breakpoints ?
                        JSON.parse(entry.target.dataset.breakpoints) :
                        defaultBreakpoints
                    // Update the matching breakpoints on the observed element.
                    Object.keys(breakpoints).forEach(function(breakpoint) {
                        var minWidth = breakpoints[breakpoint]
                        if (entry.contentRect.width >= minWidth) {
                            entry.target.classList.add(breakpoint)
                        } else {
                            entry.target.classList.remove(breakpoint)
                        }
                    })
                })
            })
            // Find all elements with the `data-observe-resizes` attribute
            // and start observing them.
            var elements = document.querySelectorAll('[data-observe-resizes]')
            for (var element, i = 0; element = elements[i]; i++) {
                ro.observe(element)
                console.log('resizing observed')
            }
        }
    </script>
</body>

</html>