What I'm trying to do is to play a video inside ColorBox lightbox.

My HTML code is as follows. When I click on the link it should play the video.

<a href=".mp4?t=634914421568400000" target="_blank" class="photo_link cboxElement iframe">Video</a>

What I do with Colorbox is as below. Load the video into lightbox.

jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

It gives me the below error.

Error: cboxElement missing settings object

ScreenShot

What should I do to fix this ? Given that there are no js errors except above one. jQuery is included correctly.

What I'm trying to do is to play a video inside ColorBox lightbox.

My HTML code is as follows. When I click on the link it should play the video.

<a href="http://cdn-azu-ns.viddy./media/video/0b2b103a-0c40-48a4-877a-64645ef5a0ae-high.mp4?t=634914421568400000" target="_blank" class="photo_link cboxElement iframe">Video</a>

What I do with Colorbox is as below. Load the video into lightbox.

jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

It gives me the below error.

Error: cboxElement missing settings object

ScreenShot

What should I do to fix this ? Given that there are no js errors except above one. jQuery is included correctly.

• javascript
• jquery
• html
• colorbox

• I'm having the same problem. But for example if you add open: true in the parameters, it works fine. Obviously it should work on click only. If someone has the answer please post it. – Alfonso Commented Jan 31, 2013 at 16:03

4 Answers 4

I had the same problem. I'm having a hard time trying to understand why exactly, but somewhere the colorbox is running in to a conflict because it also uses the name 'iframe' internally. Somehow this is causing a conflict when the classname 'iframe' is used as the class by which the function is called.

In my case changing

jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

to:

 jQuery(".photo_link").colorbox({iframe:true, width:"80%", height:"80%"});

worked.

Well this worked for me. Even though everything was in place and all the code was generated in the backend, for some reason colorbox wasn't picking up the links properly because on my page the link was inside a div that shows/hide on mouseover. Anyway, the way it worked for me was this one:

$(".iframe").live('click', function(e){
        $(this).colorbox({href: $(this).attr('href'), iframe:true, innerWidth:640, innerHeight:480, open:true});
        e.preventDefault();
        return false;
    });

In this way you rebind the actions to the element and then forces colorbox to open the link.

I hope it works for you and it isn't too late.

PS: If you're using jQuery 1.9+ you must use on instead of live

I ran into this same error and solved it by removing a duplicate call to colorbox. I had included both the library as well as my colorbox function in two separate include files. I figured it must be a duplicate because I had to close each colorbox window twice after it launched.

Check your code and make sure that the jquery.colorbox-min.js is only included once, as well as your function that calls it. In my case, my function was simple:

$(document).ready(function(){
    $("a.single_image").colorbox();
    $("a.link_preview").colorbox({iframe:true, width:"80%", height:"90%"});
}); 

After removing the duplicate calls, the problem went away. Hope it helps!

I experienced this error Error: cboxElement missing settings object when making a second jQuery on document ready function call after the initial on document ready function call that holds the colorbox parameters.

My situation:

• On my pages I use and call just one external .js file that holds all my code.

• Inside the external .js file I have the colorbox parameters within a jQuery on document ready function.

• On the troubled page (page with cboxElement missing settings object
  error), immediately following the external .js file I had some
  jQuery code that used the on document ready function: $(function(){});

My problem:

This second on document ready call caused and triggered the error Error: cboxElement missing settings object for me.

My solution:

The fix was as easy as changing the troubled pages code from using jQuery's on document ready function to using Javascript's native self-executing anonymous function.

(function(){
})();

Sure enough the error Error: cboxElement missing settings object went away and everything works perfect!