Trying to load a video lightbox

JavaScript
1

Hello sitepoint community!

I am currently learning JS and am a little stuck with a jQuery Lightbox plugin called VenoBox.

I’ve followed the steps in the documentation and believe I’m probably missing something really obvious, but can’t figure it out. I’ve created a website using a ThemeForest template which I’ve edited to make it personalised. You can view the website here as a reference.

If you click on the top right hand image which, when hovered over, should display the text SCOPE, then click, you’ll see the VenoBox is present and a loading circle appears. However, the video never loads.

If I follow the documentation, I can confirm I’ve done the following:

Include venobox.css into the HTML 

    <link rel="stylesheet" href="stylesheets/bootstrap.css">
    <link rel="stylesheet" href="stylesheets/isotope.css">
    <link rel="stylesheet" href="stylesheets/venobox.css">
    <link rel="stylesheet" href="stylesheets/sinister.css">
    <link rel="stylesheet" href="stylesheets/slimmenu.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/main-bg.css">
    <link rel="stylesheet" href="stylesheets/main-responsive.css">	
	<link rel="stylesheet" href="stylesheets/lightbox.css">

Include venobox.min.js into the footer, after the jQuery library

<link rel="stylesheet/less" type="text/css" href="less/color.less">
    <link rel="stylesheet/less" type="text/css" href="less/fonts.less">
    <script src="less/less.min.js"></script>
    <script src="javascripts/libs/venobox.min.js"></script>

Insert one or more links with their custom class

<div class="works-item signature-adler ImageWrapper works-item-one-half zoom logos">
                      <img data-no-retina alt="" title="" class="img-responsive" src="images/works/04.jpg"/>
                      <a  class="venobox" data-vbtype="video" data-autoplay="true" href="https://vimeo.com/221800817">
                          <div class="works-item-inner ImageOverlayHe">
                            <p class="valign text-center"><span class="white font3">SCOPE</span></p>
                          </div>
                      </a>
              </div>

Initialize plugin

<script>
	$(document).ready(function(){
  $('.venobox').venobox(); 
});</script>

So, I’m really stuck as to where I have gone wrong. All of the files are uploaded in their correct places, there don’t appear to be any errors in Visual Studio Code, but the video will not load…

Any help or indication as to where I’ve gone wrong would be greatly appreciated as I’m tearing my hair out!

2

With all the .css, .less, and .js files you’re loading, the issue could be conflict. I don’t know if venobox is compatible with less, or bootstrap, or isotope, or sinister, or anything else that you’re loading. Not to mention, with all the libraries you’re loading, the page weight must be huge. Why are you cramming so many libraries into one project?

V/r,

^ _ ^

1 Like
3

The .css, .less, and .js files were all part of the index.html from the original template. I haven’t changed them from the original. VenoBox was part of the template originally too, it’s not something I’ve added, I’ve just simply followed the documentation to ensure everything is in the right places.

4

I’m not trying to be a jerk, or anything, but whomever designed that template probably doesn’t code for efficiency, and probably didn’t take JavaScript conflicts into consideration. He/She probably just threw a bunch of stuff together, thinking “This is gonna be so cool.”

Does the browser console provide any error messages?

V/r,

^ _ ^

1 Like
5

Oh I totally understand! I didn’t think you were being a jerk, for the record! I’m just finding it a little overwhelming using and editing a template as well as learning JS, but I’m helping out a family member.

When I load the website, I get the following console error:

Uncaught ReferenceError: jQuery is not defined
_ at venobox.min.js:12_

When I click on ‘SCOPE’ (the tile that I want to produce the video lightbox) I get the following:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://vimeo.com/221800817 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

But, if I remove the script called ‘javascripts/libs/venobox.min.js’ then I don’t get those errors…

6

AH-HA! okay, jQuery has to load before venobox.min.js. :slight_smile: That part was simple.

This is a little problematic. If you are using AJaX to “get” the video from somewhere else CORS kicks into gear (Cross Origin Request Share). It’s a security protocol, designed to prevent stealing of data/information. If the video exists on the same protocol/FQDN/port, no problem; but you can’t “reach out” to another domain and get something via AJaX (or JavaScript in general.)

HTH,

^ _ ^

1 Like
7

Whenever I write that, it’s kind of my way of saying “What I’m about to say might be taken as me being a jerk, however…” :slight_smile:

V/r,

^ _ ^

8

If I move venobox.min.js below the jQuery initialization then things get even worse. If I click on ‘SCOPE’, instead of now loading the lightbox, it displays the ‘x’ in the top right and starts playing the music from the video on the web page. It also displays the white circular loading icon in the middle of the page.

music-playing
music-playing1901×602 207 KB

I also get the console error:

Uncaught TypeError: Cannot read property ‘height’ of undefined
_ at updateoverlayresize (common.js:679)_
_ at common.js:692_
_ at dispatch (common.js:3)_
_ at r.handle (common.js:3)_

If I remove venobox.min.js entirely from the index.html document then the site returns to ‘normal’ where I can click on ‘SCOPE’ and the lightbox appears with the loading icon and no video.

So regarding the CORB error, would I simply need to save the video to the server and reference the file location rather than linking to an external website?

Sorry for all the back and forth!

9

It looks like you’re including venobox twice, once as part of the common.js and then again separately as venobox.js… and then you have yet another lightbox.js script that opens video links. So if venobox is part of that theme, then it’s probably not supposed to be replaced with your own version or an alternative… :-/

1 Like
10

I’ve now removed venobox.min.js and lightbox.js from the index.html file. I no longer have console errors but still the original issue remains that the video doesn’t appear or play.

It would appear that no one can figure out why the video doesn’t play. I’ve passed this to a team of developers and programmers and still no answers >_< Argh it’s driving me mad!

Are there any other video lightbox plugins I could use to achieve what I want? I simply want to be able to click on a tile on the homepage and for a video lightbox to appear and play a video, but keep the styling of what I currently have.

11

Yes, if the video file is located within the site file structure you will (obviously) have permission to access it. Now, given some of the other issues you’re experiencing I can’t guarantee that it will play. But once you’ve got the VenoBox issues corrected, it should load/play.

V/r,

^ _ ^

2 Likes
12

This (from WolfShade). Ajaxing content from Vimeo directly is not your friend. Note if you right click that specific box, and then click open in new tab… It works correctly.

I swear, this behavior is the same that happened 20 years ago to prevent hot-linking images from other websites. Vimeo, like Youtube and others want their due credit for the hosting/bandwidth.

I happily await community assassination if I’m wrong on this. Yes, I host vids on my own servers to get around this limitation easily.

13

I’ve uploaded the video to a folder within the site file structure and unfortunately it still doesn’t display! I can right click > open in new tab > download video, but I can’t get it to play on the website.

15

That is because the box is actually a regular link with a href to vimeo… kind of a no-JS fallback. Also there’s no AJAX involved here – venobox would include the video as an iframe.

However I just noticed that the version of venobox that is included in common.js is a bit outdated – it’s version 1.5.2, and the latest version is 1.8.3. I tried that on a clean page, and it doesn’t work for me either then… so maybe try replacing common.js with venobox.min.js altogether. This will most likely break other functionality of your page such as the masonry, but at least we can narrow down the problem.

PS: And revert the link back to vimeo… I don’t think venobox can handle regular video files.
PPS: Also note that there’s an open issue that autoplay won’t work in chrome.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.