JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.6.5/mediaelementplayer.min.css">
<script src="http://projets.alteo.fr/carneau/www/public/js/jquery/plugins/jquery.fancybox-1.3.4.pack.js"></script>
<script src="http://projets.alteo.fr/carneau/www/public/js/jquery/plugins/mediaelement-and-player.min.js"></script>
<script src="http://jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<a href="#video" id="remove-player" rel="lightbox">Lancer</a>
<div class="nodisplay"> <div id="video"><video id="test" width="795" height="450" src="http://projets.alteo.fr/carneau/www/public/images/gazon-puzzle_qtp.mp4" preload="none"></video></div> </div>

CSS

.nodisplay {}

#fancybox-loading { position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; }
    #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url(../images/ico_loader.gif); }
#fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; }
#fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; }
#fancybox-wrap { position: absolute; top: 0; left: 0; padding:20px; z-index: 1101; outline: none; display: none; background:#FFFFFF;}
#fancybox-outer { position: relative; width: 100%; height: 100%; background: #fff; }
#fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: relative; overflow: hidden; z-index: 1102; }
#fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1101; }
#fancybox-close { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; cursor: pointer; z-index: 1103; display: none; }
#fancybox-error { color: #444; font: normal 12px/20px Arial; padding: 14px; margin: 0; }
#fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; }
#fancybox-frame { width: 100%; height: 100%; border: none; display: block; }
#fancybox-left,
#fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background: transparent url('blank.gif'); z-index: 1102; display: none; }
#fancybox-left { left: 0px }
#fancybox-right { right: 0px }
#fancybox-left-ico,
#fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1102; display: block; }
#fancybox-left-ico { background-image: url(../images/ico_loader.gif); background-position: -40px -30px;...

JavaScript

var player;

$('a[rel*=fancybox], a[rel*=lightbox]').fancybox({'centerOnScroll': true, 'margin': 0, 'padding': 0, 
'onStart':function() {
    
},
'onComplete':function() {
  console.log(player);
    if (null == player) {
        console.log('player = null');
        
        player = new MediaElementPlayer('#test', {
            videoWidth: 795,
            videoHeight: 450,
            enableAutosize: true,
            features: ['playpause','current','progress','duration', 'volume']
        });
    }
    console.log('ok');
   
},
'onCleanup' : function() {      
    player.remove(); 
    player = null;        
}
});



/*$('video').mediaelementplayer({
            videoWidth: 795,
            videoHeight: 450,
            enableAutosize: true,
            features: ['playpause','current','progress','duration', 'volume']});*/