JSFiddle - React, Tailwind, and code Playground

by Tom Delalune

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 class="play">PLAY</button>
  <button class="pause">Pause</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>
  <button class="play">PLAY</button>
  <button class="pause">Pause</button>
</div>

SCSS

a {
 margin:1em;
}
button {
   margin:1em;
}
/* #inline-video {
  display:none;
  width:100%
} */
.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 iframe = document.querySelector('iframe'),
      player;
  $(".fancybox-media").fancybox({
      type: 'inline',
      openEffect  : 'none',
      closeEffect : 'none',
      padding   : 0,
      margin    : 0,
      width		: '75%',
      height		: 'auto',
      autoSize	: false,
      helpers: {
        overlay: {
          locked: true
        }
      },
      afterShow: function () {
        player = new Vimeo.Player('iframe');
        player.ready().then(function() {
          player.play();
        });
        player.on('ended', function(data) {
            $.fancybox.close()
        });
      },
      beforeClose: function () {
        player = new Vimeo.Player('iframe');
        player.unload();
      }
  });
 });