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>

 <div class="embed-container" id="inline-video">
	<iframe id="looklet-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;
}
#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($){
  $(".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 () {
       var idPlayer = new Vimeo.Player('looklet-video');
       idPlayer.play();    
       idPlayer.on('ended', function(data) {
            $.fancybox.close()
       });
      }
  });
 });