JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/PzBk4-awY40?autoplay=1"><div id="video_nav"><h3 class="nav_text">Video</h3></div></a>

JavaScript

// this format
// http://www.youtube.com/watch?v=PzBk4-awY40
// won't work with iframe
// use this instead 
// http://www.youtube.com/embed/PzBk4-awY40
// you could also add ?autoplay=1 as triling parameter

$(".various").fancybox({
    maxWidth: 800,
    maxHeight: 600,
    fitToView: false,
    width: '70%',
    height: '70%',
    autoSize: false,
    closeClick: false,
    openEffect: 'elastic',
    closeEffect: 'none'
});