Search code examples
jquerycolorbox

multiple videos in colorbox? 1st loads but others fail

I'm using Colorbox 'rel function' to display a mixture of local images and youTube videos in 1 lightbox, which I have managed to achieve up to a point. The problem is I need to insert multiple videos but when I do I can not get more than one to load in colorbox with a 'Request unsuccessful: error' displayed. I have set the videos to display in an iframe with a set width and height and cant understand why 1 works but not more than 1. (If I switch around the order that they display the one displayed first always shows but no others, so I know the source videos are ok.

Here is my code:

<script>
    jQuery(document).ready(function () {
        jQuery('a.gallery1').colorbox({ rel:'group1' });
        jQuery('a.gallery2').colorbox({ rel:'group2' });
        jQuery('a.gallery3').colorbox({ rel:'group3' });
        jQuery('a.gallery4').colorbox({ rel:'group4' });
        jQuery('a.gallery5').colorbox({ rel:'group5' });
        jQuery('a.gallery6').colorbox({ rel:'group6' });
        jQuery('a.gallery7').colorbox({ rel:'group7' });
        jQuery('a.gallery8').colorbox({ rel:'group8' });
        jQuery('a.gallery9').colorbox({ rel:'group9' });
        jQuery('a.gallery10').colorbox({ rel:'group10' });
        jQuery('#video').colorbox({iframe:true, innerWidth:493, innerHeight:370});

    }); 
</script>

<a class="gallery1" href="images/content/cosmos1Full.jpg" title="Salvatore Arancio, title of work, year">
                    <img src="images/content/cosmos1.jpg"  alt="cosmos1" width="484" height="370" />
                    <a class="gallery1" href="images/content/ohoopee2.jpg" title="Salvatore Arancio, title of work, year">
                    <a class="gallery1" href="images/content/ohoopee3.jpg" title="Salvatore Arancio, title of work, year">
                    <a class='gallery1' href="http://vimeo.com/moogaloop.swf?clip_id=29956704&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&" title="Ed Atkins, 'Death Mask 3', 2011. Extract." id="video">
                    <a class='gallery1' href="http://www.youtube.com/v/rhCssm8BMNM?version=3" title="A Tumour (Ed Atkins)" id="video"></a>
Solution

  • My guess is that you are reusing the video id, even though ids are required to be unique by the HTML spec. Change it over to a class if you are planning on applying it to multiple elements.