我正在尝试使用lightgallery包含youtube视频的视频库,但无法使视频播放器正常工作。相反,它会在新标签页上打开youtube。我正在使用CDN链接加载lightgallery,看来我缺少lg视频。但是,当我包含lg-video的cdn链接时,出现一些未定义的控制台错误。有人可以用我需要包含在HTML代码中的所有脚本标签来回答这个问题吗?
这就是我拥有的:
lightGallery(document.getElementById('lightgallery'), {
pager:true,
thumbnail:true,
});
lightGallery(document.getElementById('video-gallery'), {});
body{
background-color: #152836
}
.demo-gallery > ul {
margin-bottom: 0;
}
.demo-gallery > ul > li {
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery > ul > li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > 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 > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > 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 > ul > li a .demo-gallery-poster > 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 > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > 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 > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > 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 > a .demo-gallery-poster > 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 > 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 > ul > li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
<div class="demo-gallery">
<ul id="video-gallery">
<li class="video" data-src="https://youtu.be/YD_gvR234qg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/y-video1-cover.jpg">
<a href="https://youtu.be/YD_gvR234qg">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<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">
<a href="https://www.youtube.com/watch?v=Pq9yPrLWMyU">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<li class="video" data-src="https://vimeo.com/1084537"
data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video1-cover.jpg">
<a href="https://vimeo.com/1084537">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-1.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<li class="video" data-src="https://vimeo.com/35451452"
data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video2-cover.jpg">
<a href="https://vimeo.com/35451452">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-2.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
</ul>
</div>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-video/1.2.2/lg-video.min.js"></script>