javascript - Bootstrap 的灯箱视频库无法正常工作-6ren

javascript - Bootstrap 的灯箱视频库无法正常工作

转载作者：行者123 更新时间：2023-11-28 02:38:40

我正在为一个包含图片库和视频库的网站使用 bootstrap 4。我正在从 http://ashleydw.github.io/lightbox/#image-gallery 中提取一些资源用于灯箱工作。

我已经在 body 底部实现了 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>

唯一的区别是我从默认代码中删除了 class="col-md-4"，因为我的标签已经在 col-md-3 中。

我的结果是这样的:

最佳答案

我相信您的问题在于 iframe 在本地环境中寻找视频 - 我假设您是在本地开发而不是通过服务器提供您的文件。 iframe 基本上会寻找 file://youtube.com/embed/someVideoBlahBlah。这篇 wiki 文章对此进行了讨论 https://en.wikipedia.org/wiki/File_URI_scheme .为了解决这个问题，您必须通过服务器进行开发。我创建了一个 super 简单的 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!'))

关于javascript - Bootstrap 的灯箱视频库无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47292031/

文章推荐： c++ - qt，使用freeglut，错误 'glutInit'

文章推荐： javascript - jQuery/JavaScript 脚本不适用于 IE7

文章推荐： javascript - Datejs 获取一周中的一串天

文章推荐： javascript - 如何使用历史推送状态

具有缩放功能的 jQuery 灯箱
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
javascript - 灯箱 + 图像叠加下的文本
如何在放大的每个图像下添加自定义文本？现在它基于 alt 文本，但我想使用图像等对其进行更多自定义。完美的解决方案是将文本显示在 div 中。这是代码笔: // Create a lightbox
javascript - Galleriffic 灯箱
为了重新启动我的客户站点 (craft2eu.net)，我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ，但它基于旧版本的 Galleriffic，它带
css - 灯箱:使屏幕其余部分透明的问题
设计一个网站，其中我在很多地方使用了很多背景:rgba。因此，当我尝试制作一个灯箱时，我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
html - 移动友好的图像 - 灯箱
晚上好，感谢您首先尝试提供帮助。我有一个“作品集”页面，其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中，5 宽 9 向下。简单地说，当您在浏览器中单击并展开图像时，效果很好。
javascript - 灯箱/表格问题
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息，而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
javascript - 灯箱 - 自动调整全屏
我正在尝试使用这个灯箱， http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
javascript - 灯箱--> 引擎盖下是什么？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
ruby-on-rails - rails 灯箱？
有谁知道一个好的 Rails 灯箱插件？我找到了 redbox，但它似乎已经过时了。谢谢! -艾略特最佳答案我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表，
twitter-bootstrap - 灯箱 - 多张图片
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。是
mobile - 为移动设备优化 prettyPhoto 灯箱？
我目前正在使用 prettyPhoto在我正在开发的网站上，但在移动设备上遇到了一个小问题。该插件具有选项“allow_resize: false”，它不允许调整大于视口(viewport)的照片大
jquery - 灯箱 jquery 显示文本
我正在使用jquery lightbox ，有没有办法显示文本字段而不是图像或两者都显示？或者也许是另一种在灯箱弹出窗口中显示文本的方式？最佳答案这是灯箱的最佳示例视频 https://www.
jquery - 如何在页面加载时自动打开 PrettyPhoto 灯箱？
我对 Jquery 很陌生，我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例，但我一直在我的所有网站上使用 Pret
javascript - 具有模糊深色背景的纯 CSS 灯箱
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激，因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像，这样当我单击每个图像时，此灯箱效果将适用
javascript - CSS/Javascript 灯箱
首先，我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师，正在帮助 friend 设计她的网站。截至目前，我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
javascript - jQuery 灯箱。找不到方法
我肯定遇到了一个简单的问题，但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到，我只是不明白为什么。代码是 $(f
javascript - 灯箱 iframe 关闭
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe？我的代码是这样的: 最佳答案通过this answer至 Close a ligh
javascript - 非 jQuery 灯箱
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
JavaScript 弹出框 vs 灯箱？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
javascript - 我应该如何使用带 Angular 灯箱
我正在使用 angular 来显示我的 Student Object 的详细信息一切正常但还需要作业文本上的超链接，这样当有人点击它时，会打开一个灯箱，其中包含所有作业对象的详细信息。现在我的老

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap 的灯箱视频库无法正常工作