JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css">
<a class="fancybox-media" href="#inline-video">OPEN</a>
 
 <button id="play">PLAY</button>

 <div class="embed-container" id="inline-video">
	<iframe id="my-video" src="https://player.vimeo.com/video/76979871?title=0&byline=0&portrait=0" width="900" height="506" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

SCSS

a {
 margin:1em;
}
button {
   margin:1em;
}
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
  iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

JavaScript

$(document).ready(function($){
		var idPlayer = new Vimeo.Player('my-video');
    $("#play").click(function() {
      idPlayer.play();
    });
  	$(".fancybox-media").fancybox({
    type: 'inline',
    openEffect  : 'none',
    closeEffect : 'none',
    padding   : 0,
    margin    : 0,
    width		: '75%',
    height		: 'auto',
    autoSize	: false,
    afterShow: function () {
      idPlayer.ready().then(function() {
        console.log('the Player is ready');
        idPlayer.play();
      });
    },
    beforeClose: function () {
      idPlayer.pause();
    }
	});
 });