title: lightGallery.js video gallery not working
body: <p>I am trying to include a video gallery of youtube videos using lightgallery but I can't get the video player to work. It instead opens youtube on a new tab. I am using cdn links to load lightgallery and it looks like i'm missing lg-video. However when I include lg-video's cdn link, I am getting console errors about something being undefined. Can someone please answer this with all the script tags that I would need to include in my HTML code? </p>
  
  <p>This is what I have:    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>lightGallery(document.getElementById('lightgallery'), {
      pager:true,
      thumbnail:true,
  }); 
  
  lightGallery(document.getElementById('video-gallery'), {});</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      background-color: #152836
  }
  .demo-gallery &gt; ul {
      margin-bottom: 0;
  }
  .demo-gallery &gt; ul &gt; li {
      float: left;
      margin-bottom: 15px;
      margin-right: 20px;
      width: 200px;
  }
  .demo-gallery &gt; ul &gt; li a {
      border: 3px solid #FFF;
      border-radius: 3px;
      display: block;
      overflow: hidden;
      position: relative;
      float: left;
  }
  .demo-gallery &gt; ul &gt; li a &gt; img {
      -webkit-transition: -webkit-transform 0.15s ease 0s;
      -moz-transition: -moz-transform 0.15s ease 0s;
      -o-transition: -o-transform 0.15s ease 0s;
      transition: transform 0.15s ease 0s;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      height: 100%;
      width: 100%;
  }
  .demo-gallery &gt; ul &gt; li a:hover &gt; img {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
  }
  .demo-gallery &gt; ul &gt; li a:hover .demo-gallery-poster &gt; img {
      opacity: 1;
  }
  .demo-gallery &gt; ul &gt; li a .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
  }
  .demo-gallery &gt; ul &gt; li a .demo-gallery-poster &gt; img {
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      -webkit-transition: opacity 0.3s ease 0s;
      -o-transition: opacity 0.3s ease 0s;
      transition: opacity 0.3s ease 0s;
  }
  .demo-gallery &gt; ul &gt; li a:hover .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.5);
  }
  .demo-gallery .justified-gallery &gt; a &gt; img {
      -webkit-transition: -webkit-transform 0.15s ease 0s;
      -moz-transition: -moz-transform 0.15s ease 0s;
      -o-transition: -o-transform 0.15s ease 0s;
      transition: transform 0.15s ease 0s;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      height: 100%;
      width: 100%;
  }
  .demo-gallery .justified-gallery &gt; a:hover &gt; img {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
  }
  .demo-gallery .justified-gallery &gt; a:hover .demo-gallery-poster &gt; img {
      opacity: 1;
  }
  .demo-gallery .justified-gallery &gt; a .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
  }
  .demo-gallery .justified-gallery &gt; a .demo-gallery-poster &gt; img {
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      -webkit-transition: opacity 0.3s ease 0s;
      -o-transition: opacity 0.3s ease 0s;
      transition: opacity 0.3s ease 0s;
  }
  .demo-gallery .justified-gallery &gt; a:hover .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.5);
  }
  .demo-gallery .video .demo-gallery-poster img {
      height: 48px;
      margin-left: -24px;
      margin-top: -24px;
      opacity: 0.8;
      width: 48px;
  }
  .demo-gallery.dark &gt; ul &gt; li a {
      border: 3px solid #04070a;
  }
  .home .demo-gallery {
      padding-bottom: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo-gallery"&gt;
  
  &lt;ul id="video-gallery"&gt;
  &lt;li class="video" data-src="https://youtu.be/YD_gvR234qg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/y-video1-cover.jpg"&gt;
      &lt;a href="https://youtu.be/YD_gvR234qg"&gt;
      &lt;img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg"&gt;
      &lt;div class="demo-gallery-poster"&gt;
          &lt;img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png"&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="video" data-src="https://www.youtube.com/watch?v=Pq9yPrLWMyU"
  data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/y-video2-cover.jpg"&gt;
      &lt;a href="https://www.youtube.com/watch?v=Pq9yPrLWMyU"&gt;
      &lt;img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg"&gt;
      &lt;div class="demo-gallery-poster"&gt;
          &lt;img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png"&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="video" data-src="https://vimeo.com/1084537"
  data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video1-cover.jpg"&gt;
      &lt;a href="https://vimeo.com/1084537"&gt;
      &lt;img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-1.jpg"&gt;
      &lt;div class="demo-gallery-poster"&gt;
          &lt;img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png"&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="video" data-src="https://vimeo.com/35451452"
  data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video2-cover.jpg"&gt;
      &lt;a href="https://vimeo.com/35451452"&gt;
      &lt;img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-2.jpg"&gt;
      &lt;div class="demo-gallery-poster"&gt;
          &lt;img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png"&gt;
      &lt;/div&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lg-video/1.2.2/lg-video.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>