JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Slick-lightbox by mreq</title>
    <link href="http://jongacnik.github.io/slick-lightbox/gh-pages/stylesheets/bootstrap.css" rel="stylesheet">
    <link href="http://jongacnik.github.io/slick-lightbox/gh-pages/stylesheets/bootstrap-theme.css" rel="stylesheet">
    <link href="http://jongacnik.github.io/slick-lightbox/gh-pages/stylesheets/github-highlight.css" rel="stylesheet">
    <link href="http://jongacnik.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick.css" rel="stylesheet">
    <link href="http://jongacnik.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css" rel="stylesheet">
    <link href="http://jongacnik.github.io/slick-lightbox/dist/slick-lightbox.css" rel="stylesheet">
    <style>
      .thumbnail img { width: 100%; display: block; }
      h2 { margin-top: 30px; }
      .container { max-width: 750px; }
    </style>
    
  </head>
<div class="row" id="default-demo">
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="http://jongacnik.github.io/slick-lightbox/demo/lilac.jpg" target="_blank" class="thumbnail"><img src="http://jongacnik.github.io/slick-lightbox/demo/lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://jongacnik.github.io/slick-lightbox/gh-pages/javascripts/bootstrap.min.js"></script>
    <script...

CSS

.col-xs-4 {
    width: 33.33333333%;
}

JavaScript

/**
   * Custom Slick init to load/unload iframe src on events
   */
  $('#default-demo').slickLightbox({
    closeOnBackdropClick : false,
    slick : function ($e) {

      $e.find('.slick-lightbox-slick-iframe').each(function () {
        $(this)
          .attr('data-src', $(this).attr('src'))
          .attr('src', '')
      })

      function clearIframe (slick, index) {
        var $iframe = $(slick.$slides.get(index)).find('.slick-lightbox-slick-iframe')
        if ($iframe.length) {
          setTimeout(function () {
            $iframe.attr('src', '')
          }, slick.options.speed)
        }
      }

      function loadIframe (slick, index) {
        var $iframe = $(slick.$slides.get(index)).find('.slick-lightbox-slick-iframe')
        if ($iframe.length) $iframe.attr('src', $iframe.attr('data-src'))
      }

      /**
       * Return slick instance
       */
      return $e.find('.slick-lightbox-slick')
        .on('init', function (event, slick) {
          loadIframe(slick, slick.currentSlide)
        })
        .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
          clearIframe(slick, currentSlide)
          loadIframe(slick, nextSlide)
        })
        .slick()
    }
  });