JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-video.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-indicator.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.css">
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.js"></script>
<!--
<script src="http://blueimp.github.io/Gallery/js/blueimp-helper.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-fullscreen.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-indicator.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-video.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-vimeo.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.js"></script>
-->
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-youtube.js"></script>
<div class="row-fluid" id="gallery">
<!-- main image -->
<ul class="thumbnails">
<li class="span12 margin-bottom-0">
<a class="thumbnail center-all" href="http://i.imgur.com/mdqQTPT.jpg" style="max-height: 375px; width: 375px;" data-gallery>
<img src="http://i.imgur.com/mdqQTPT.jpg" class="main-image">
</a>
</li>
</ul>
<!-- other images / video -->
<ul class="thumbnails">
<li class="span6">
<a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E" style="height: 185px; width: 185px;">
<img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
</a>
</li>
</ul>
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script>
document.getElementById('gallery').onclick = function...