JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">

    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p id="demo">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus magni illo veritatis, at consequuntur officia vitae mollitia ut libero similique dolorum fugit hic. Eos repellendus vitae voluptas. Expedita, nemo consectetur.</p>
    <button class="button" style="padding:20px;">Open popup</button>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="http://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="new.js"></script>
</body>
</html>

JavaScript

$('.button').magnificPopup({
  items: {
	     src: 'https://www.youtube.com/watch?v=7eo8XpT4CmM'
     },
  type: 'iframe',
  iframe: {
	    	markup: '<div class="mfp-iframe-scaler">'+
            		'<div class="mfp-close"></div>'+
            		'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
            		'</div>', 
        patterns: {
            youtube: {
	              index: 'youtube.com/', 
	              id: 'v=', 
	              src: '//www.youtube.com/embed/%id%?autoplay=1' 
		        }
		     },
		     srcAction: 'iframe_src', 
     }
});