用于Bootstrap的Lightbox视频库无法正常工作
我使用bootstrap 4作为包含图片库和视频库的网站。我正在从http://ashleydw.github.io/lightbox/#image-gallery获取一些来源用于灯箱工作。
我已经在我的身体底部实现了css和jQuery脚本。图库很完美，所以我知道实现似乎没问题。但是，当我输入视频库的html时，模式框出现在点击，但没有视频运行。即使网站上列出了默认视频，也是如此。
应该是这样的：
使用此默认代码：
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Band Homepage" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css"/>
<link rel="stylesheet" href="css/main-style.css">
<title>Truth Takes Time</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Truth Takes Time</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">News</a>
<a class="nav-item nav-link" href="#">Photos</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Music</a>
<a class="nav-item nav-link" href="#">Tour</a>
<a class="nav-item nav-link" href="#">Store</a>
</div>
</div>
</div>
</nav>
<!--jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div class="container text-center">
<h1 class="display-3">Truth Takes Time</h1>
</div>
</div>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-newspaper-o fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Latest News</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all news <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="news">
<div class="container">
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-257909.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Tis the Treason Holiday Bundle</h4>
</a>
<p class="card-text">We’ve added a few new items the webstore, including this limited Tis the Treason...</p>
<p class="card-text"><small>November 3, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-69212.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Vevo "Why I Vote"</h4>
</a>
<p class="card-text">Tim recently sat down with Vevo to discuss why it's improtant to vote. Check it out </p>
<p class="card-text"><small>October 23, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-167523.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Synthesis available everywhere now!</h4>
</a>
<p class="card-text">Our new album, Synthesis, is available everywhere now!</p>
<p class="card-text"><small>September 12, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-167580.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">2017 Fall Tour</h4>
</a>
<p class="card-text">We’re hitting the road this Fall for a run of headline dates across the US + Canada with special guests!</p>
<p class="card-text"><small>August 9, 2017</small></p>
</div>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-camera fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Photos</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all pics <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="picGallery">
<div class="container mt-5">
<div class="row mb-3">
<div class="col-md-3">
<a href="img/pexels-photo-92080.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-92080.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167378.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167378.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-417473.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-417473.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-354304.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-354304.jpeg" class="img-fluid" alt="#">
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<a href="img/pexels-photo-167609.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167609.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167382.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167382.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167466.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167466.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-141376.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-141376.jpeg" class="img-fluid" alt="#">
</a>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-video-camera fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Videos</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all videos <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="vidGallery">
<div class="container mt-5">
<div class="row mb-3">
<div class="col-sm-3">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-3">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-shopping-basket fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Store</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all merch <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<script src="https://use.fontawesome.com/9a90c9b9d4.js"></script>
<!--bootstrap standard Javascript-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!--lightbox js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
</body>
</html>
唯一的区别是我删除了类=＆＃34; col-md-4＆＃34;来自默认代码，因为我的标签已经在col-md-3中。
我的出现看起来像这样： 
1 个答案:
答案 0 :(得分：0)
我相信您的问题将出现在iframe中寻找本地环境中的视频 - 我假设您正在本地开发而不是通过服务器提供文件。 iframe基本上会寻找file://youtube.com/embed/someVideoBlahBlah。这篇wiki文章讨论了它https://en.wikipedia.org/wiki/File_URI_scheme。为了解决这个问题，您必须通过服务器进行开发。我创建了一个超级简单的Express服务器（参见下面的代码），运行代码并且视频完美运行。换句话说 - 您的代码很好，它只是您提供导致问题的html文件的方式。
const express = require('express')
const app = express()
const path = require('path');
app.get('/', (req, res) => res.sendFile(path.join(__dirname + '/index.html')))
app.listen(3000, () => console.log('Example app listening on port 3000!'))
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？