Having trouble getting the Lightbox video Gallery to function properly in Bootstrap

When building my website with bootstrap 4, I incorporated image and video galleries. To create a lightbox effect, I referenced .

My CSS and jQuery script are implemented at the end of the body. The image gallery functions perfectly, indicating that the implementation is correct. However, when adding the HTML for the video gallery, the modal box opens on click but the videos do not play. This issue persists even with the default videos provided on the website.

This is what the expected outcome should look like:

https://i.sstatic.net/nffhW.jpg

Using this default code:

<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>

Here is the actual code I am using:

    <!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>

    <!-- Additional content removed for brevity -->
    
    <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>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It seems like the issue you're facing is related to the iframe searching for the video within your local environment. If you are working on a local development setup without serving your files through a server, the iframe might be looking for 

file://youtube.com/embed/someVideoBlahBlah
. You can learn more about this behavior in the following wiki article: https://en.wikipedia.org/wiki/File_URI_scheme. To resolve this problem, consider developing with a server. I tested your code with a simple Express server (shown below) and found that the videos functioned correctly. Essentially, your code is fine; it's just how you are hosting your HTML file that is causing the issue.

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!'))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on updating a specific item in a JSON array using npm request

I am currently working on setting a value in a JSON array utilizing a PUT request with the request module, specifically targeting one of multiple main objects within the array. The structure is as follows: [ 0: { status: 'pending' ...

javascriptjsonnode.jsnpm

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...

csshtmlaccessibilitysection508wcag2.0

"Troubleshooting: Vue ChartJS Line Chart fails to show data

Hey there! I'm currently working on integrating Chart.js with the vue-chartjs wrapper to build a Line Chart using data retrieved from my API. The data is being successfully logged to the console without any errors, but for some reason, the Line Chart ...

javascriptvue.jschart.jsvue-chartjs

What is the importance of having Actions and Reducers in Redux?

I am trying to grasp the reasoning behind the design of Redux. For instance, let's consider a scenario where I have a store with a list of todos. If the store is represented as an object like this: {1: todo1, 2: todo2, 3: todo3, ...}* And we enca ...

javascriptreactjstypescriptredux

Unlock the message with Proxy Re-encryption technology

I'm completely new to encryption and am experimenting with a Node JS library called recrypt-js for Proxy Re-encryption using CryptoJS. I tried encrypting the message "test data" following the example provided, but I'm facing difficulty when tryin ...

javascriptnode.jscryptojsencryption-asymmetric

Retrieve a specific row from a table in Bootstrap

Is there a way to highlight a row in a table by clicking on it using CSS classes? $("#infoTable tr").click(function() { var selected = $(this).hasClass("highlight"); $("#infoTable tr").removeClass("highlight"); if (!selected) $(this).addClass( ...

javascriptjquerybootstrap-4

What is the best approach for testing the TypeScript code below?

Testing the following code has been requested, although I am not familiar with it. import AWS from 'aws-sdk'; import db from './db'; async function uploadUserInfo(userID: number) { const user = db.findByPk(userID); if(!user) throw ...

javascriptnode.jstypescripttesting

Assistance with JSONP (Without the use of jQuery)

I've been putting in a lot of effort trying to understand how to make a JSONP request, but all the reference materials I find are full of jQuery examples. I can go through the jQuery source code, but I prefer a straightforward and simple example. I&ap ...

ajaxjsonjsonpjavascript

Adjust the overall quantity count whenever a row is removed from a live table

Within the code snippet below, users have the ability to select a color and add it to a table that adjusts dynamically. The quantity of each selected color is shown on every row, and the total quantity of all colors is displayed at the table's bottom. ...

javascriptjquery

The function inArray() in jQuery will return a value of -1 when an array consists of

When using jQuery inArray, if the array contains only one element, it will return -1. var a = Array(1); console.log($.inArray(1,a)); This result is -1. However, if the array has 2 or more elements, it functions correctly. var a = Array(1,2,3); console.l ...

javascriptjquery

Regular expression that prohibits the acceptance of numbers with leading zeros

Below is the directive I am using to ensure that the input consists purely of numbers from 0-9. import { Directive, HostListener, ElementRef } from "@angular/core"; @Directive({ selector: "[numbersOnly]", }) export class OnlynumberDi ...

javascriptregexangular

Tips for refreshing CSS following an ajax request

Currently, I am facing an issue with the CSS formatting on my page. I am using Django endless pagination to load content on page scroll. However, when new content is loaded, the CSS applied to the page does not work properly and needs to be refreshed. Can ...

javascriptpythoncssajaxdjango

Datetimepicker cannot be displayed on this bootstrap version

I am looking to implement a datetime picker for a textbox, but I suspect that I am missing some necessary Bootstrap links. Could someone please point them out for me? Thank you in advance. <div class="form-group row align-items-center justify-conten ...

htmlbootstrap-4

Unable to interact with a button element of type="button" using Selenium, but successful with elements of type

In my attempt to interact with the webpage, I am specifically focusing on this button: <button class="button-text-like marg-l-0 float-l desktop-only remove-button" data-bind="click: $root.removeCartItem" type="button"> <i class="gicon-cross">& ...

htmlpython-2.7domselenium-webdriver

d3 bar chart with overlapping bars - define x and y coordinates

Here is a glimpse of the data I am working with: var students = [ {'race': 'Black', 'count': 7, 'year': 2004, 'allnames': ['G Brown', 'F Clarkson', 'E Miller', 'R Black& ...

javascriptpythondjangod3.js

What is the process for retrieving data from a Cloudant document using Node.js?

I added the following code to the index.html page on bluemix: $(document).ready(function() { $("button").click(function() { var Cloudant = require('cloudant'); var password = "#password"; ...

javascriptnode.jsibm-cloudcloudant

Looking to display state-based dynamic data in a collapsible table with rows and columns using Material UI in React.js?

I came across the Material UI Collapsible Table component that I found quite intriguing, you can check it out here: https://material-ui.com/components/tables/#table My goal is to display dynamic data in both the table header and rows, with the ability to ...

javascriptreactjsmaterial-uicollapsable

Divide the table header column "th" into two separate columns

Can someone assist me in achieving the output displayed in the image? I want to separate the header th into two lines like the blue line shown. I need two headers for a single td column. Please help, thank you. https://i.sstatic.net/SwILH.png <style& ...

javascripthtmlcss

What is the best way to ensure a navigation link stops scrolling at the bottom of a navbar that is set to position: sticky?

I am utilizing Bootstrap 5 for my website, and I have a sticky-top attribute on my navbar. When I click on one of the links in the navigation bar, the page scrolls to that section, but some of the content goes behind the navbar. I am looking for a way to m ...

javascripthtmlcssbootstrap-5

Successful AJAX value transfer with no corresponding output

I have implemented a functionality where a user types in a textarea, presses tab, and then an Ajax call retrieves data to populate a select box based on the input from the textarea. <body> <textarea id='test' name="test"></te ...

phpjquerymysqlajax