title: Lightbox video Gallery for Bootstrap not working
body: <p>I'm using bootstrap 4 for a website which includes an image gallery and video gallery. I'm pulling some sourcing from <a href="http://ashleydw.github.io/lightbox/#image-gallery" rel="nofollow noreferrer">http://ashleydw.github.io/lightbox/#image-gallery</a> for the lightbox work.</p>
  
  <p>I've implemented the css and the jQuery script at the bottom of my body. The image gallery works perfectly so I know the implementation seems to be okay. However, when I input the html for the video gallery, the modal box appears on click, but no video runs. This is true even with their default videos listed on the website.</p>
  
  <p>Should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/nffhW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nffhW.jpg" alt="enter image description here"></a></p>
  
  <p>With this default code:</p>
  
  <pre><code>&lt;a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4"&gt;
      &lt;img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And here is my code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content="Band Homepage" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css"/&gt;
      &lt;link rel="stylesheet" href="css/main-style.css"&gt;
  
      &lt;title&gt;Truth Takes Time&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!--navbar--&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light"&gt;
          &lt;div class="container"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Truth Takes Time&lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
                  &lt;div class="navbar-nav ml-auto"&gt;
                      &lt;a class="nav-item nav-link active" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;News&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;Photos&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;Videos&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;Music&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;Tour&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="#"&gt;Store&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;!--jumbotron--&gt;
      &lt;div class="jumbotron jumbotron-fluid"&gt;
          &lt;div class="container text-center"&gt;
              &lt;h1 class="display-3"&gt;Truth Takes Time&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;section class="section-header mt-5 mb-5"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-header"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="row"&gt;
                              &lt;i class="fa fa-newspaper-o fa-3x mr-4 mt-2" aria-hidden="true"&gt;&lt;/i&gt;&lt;h4 class="display-4"&gt; Latest News&lt;/h4&gt;
                              &lt;a href="#" class="btn btn-link ml-auto mt-3"&gt;View all news   &lt;i class="fa fa-arrow-circle-o-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="news"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="card mb-3"&gt;
                          &lt;a href="#"&gt;
                              &lt;img class="card-img-top" src="img/pexels-photo-257909.jpeg" alt="Card image cap"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;a href="#"&gt;
                              &lt;h4 class="card-title"&gt;Tis the Treason Holiday Bundle&lt;/h4&gt;
                          &lt;/a&gt;
                          &lt;p class="card-text"&gt;We’ve added a few new items the webstore, including this limited Tis the Treason...&lt;/p&gt;
                          &lt;p class="card-text"&gt;&lt;small&gt;November 3, 2017&lt;/small&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="card mb-3"&gt;
                          &lt;a href="#"&gt;
                              &lt;img class="card-img-top" src="img/pexels-photo-69212.jpeg" alt="Card image cap"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;a href="#"&gt;
                              &lt;h4 class="card-title"&gt;Vevo "Why I Vote"&lt;/h4&gt;
                          &lt;/a&gt;
                          &lt;p class="card-text"&gt;Tim recently sat down with Vevo to discuss why it's improtant to vote.  Check it out &lt;/p&gt;
                          &lt;p class="card-text"&gt;&lt;small&gt;October 23, 2017&lt;/small&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="card mb-3"&gt;
                          &lt;a href="#"&gt;
                              &lt;img class="card-img-top" src="img/pexels-photo-167523.jpeg" alt="Card image cap"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;a href="#"&gt;
                              &lt;h4 class="card-title"&gt;Synthesis available everywhere now!&lt;/h4&gt;
                          &lt;/a&gt;
                          &lt;p class="card-text"&gt;Our new album, Synthesis, is available everywhere now!&lt;/p&gt;
                          &lt;p class="card-text"&gt;&lt;small&gt;September 12, 2017&lt;/small&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="card mb-3"&gt;
                          &lt;a href="#"&gt;
                              &lt;img class="card-img-top" src="img/pexels-photo-167580.jpeg" alt="Card image cap"&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;a href="#"&gt;
                              &lt;h4 class="card-title"&gt;2017 Fall Tour&lt;/h4&gt;
                          &lt;/a&gt;
                          &lt;p class="card-text"&gt;We’re hitting the road this Fall for a run of headline dates across the US + Canada with special guests!&lt;/p&gt;
                          &lt;p class="card-text"&gt;&lt;small&gt;August 9, 2017&lt;/small&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section class="section-header mt-5 mb-5"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;i class="fa fa-camera fa-3x mr-4 mt-2" aria-hidden="true"&gt;&lt;/i&gt;&lt;h4 class="display-4"&gt; Photos&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-link ml-auto mt-3"&gt;View all pics   &lt;i class="fa fa-arrow-circle-o-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="picGallery"&gt;
          &lt;div class="container mt-5"&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-92080.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-92080.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-167378.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-167378.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-417473.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-417473.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-354304.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-354304.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-167609.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-167609.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-167382.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-167382.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-167466.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-167466.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                      &lt;a href="img/pexels-photo-141376.jpeg" data-toggle="lightbox" data-gallery="picGallery"&gt;
                          &lt;img src="img/pexels-photo-141376.jpeg" class="img-fluid" alt="#"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section class="section-header mt-5 mb-5"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;i class="fa fa-video-camera fa-3x mr-4 mt-2" aria-hidden="true"&gt;&lt;/i&gt;&lt;h4 class="display-4"&gt; Videos&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-link ml-auto mt-3"&gt;View all videos   &lt;i class="fa fa-arrow-circle-o-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="vidGallery"&gt;
          &lt;div class="container mt-5"&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row mb-3"&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos"&gt;
                          &lt;img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                          &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  
      &lt;section class="section-header mt-5 mb-5"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;i class="fa fa-shopping-basket fa-3x mr-4 mt-2" aria-hidden="true"&gt;&lt;/i&gt;&lt;h4 class="display-4"&gt; Store&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-link ml-auto mt-3"&gt;View all merch   &lt;i class="fa fa-arrow-circle-o-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  
  
  
      &lt;script src="https://use.fontawesome.com/9a90c9b9d4.js"&gt;&lt;/script&gt;
      &lt;!--bootstrap standard Javascript--&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!--lightbox js--&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).on('click', '[data-toggle="lightbox"]', function (event) {
              event.preventDefault();
              $(this).ekkoLightbox();
          });
      &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The only difference is I remove the class="col-md-4" from the default code as my  tag is already in a col-md-3.</p>
  
  <p>Mine comes out looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/XMCDc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XMCDc.jpg" alt="enter image description here"></a></p>