search

ashleydw / lightbox

A lightbox gallery plugin for Bootstrap
http://ashleydw.github.io/lightbox
MIT License
1.85k stars 1.3k forks source link

No show video's on lightbox local site? For Firefox, Chrome, Safari. #250

Closed Schoorsteenveger closed 7 years ago

Schoorsteenveger commented 7 years ago

On my local testsite the video's in the image gallery give this error: File not found or removed. It happens for Chrome, Firefox and Safari. I don't know if this a bug ( i'm a beginner) or that i should ignore it until i put the site online.

I added the cdn script links to the html page. Also tried to put the files in the folders, but it gives the same result, so i removed those.

When i upload the site to Bitballoon, the video lightbox works just fine. I provide the links below.

Link to Bitballoon version. Added the examples from the stite and my own video's.

Firefox version 52.0.2 (Firefox screenshot) Chrome version 57.0.2987

Thanks already

ashleydw commented 7 years ago

The links down the bottom of your page to youtube are working for me?

Schoorsteenveger commented 7 years ago

Yes, on Bitballoon they all do. But when i drag the index.html from my desktop to the 3 browsers, they don't show. I tried on two imac's. This is another screenshot.

ashleydw commented 7 years ago

When you open a file on your local machine directly you're using the file:// protocol to open it. In the code you have, you're requesting the video without a protocol:

<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                    <img src="http://d33wubrfki0l68.cloudfront.net/0305c974acae3cade459a9f69a48e30b66da011e/95811/img/verslag.png" class="img-responsive img-centered"></a>

Notice the <a href="//www.yout.... Without a protocol, your browser will use the protocol you opened the page with; so when opening it locally it's using file:// rather than http://.

You need to add a protocol to the links, or use a local webserver to host the files.

In-short; add http: before the link. For example:

<a href="http://www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                    <img src="http://d33wubrfki0l68.cloudfront.net/0305c974acae3cade459a9f69a48e30b66da011e/95811/img/verslag.png" class="img-responsive img-centered"></a>
Schoorsteenveger commented 7 years ago

Thanks for helping, i overlooked that one. I'll upload the files to the server soon, than it will work.