When my main page loads, it grabs the first entry with the id="vids" from videos.html.

 

Main Page:

 

<div id="sidevideos" class="sidevideos">

<script>
$('#sidevideos').load('videos.html .vids:lt(1)');
</script>
</div>

 

That works great, no problem.

 

 

I would like to be able to pass the video link( .vids) to this function on the main page

 

<script>
      var $v = jQuery.noConflict();
       $v(document).ready(function() {
                $v('.vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
        
   });

        </script>

 

Which would open the youtube video in an iframe.

 

Video.html Code:

 

<div class="videos">
 
 <a class='vids' href="RANDOM YOUTUBE VID"><img src="img/videos/housing.png" border="0" class="sidevids">
 <p class="sidevidtext">VIDEO DESCRIPTION</p></a>
 
 <a class='vids' href="RANDOM YOUTUBE VID 2"><img src="img/videos/housing.png" border="0" class="sidevids">
 <p class="sidevidtext">VIDEO DESCRIPTION 2</p></a>
    
    </div>

 

Edit:

 

changing the onload code to thise fixed it

 

$('#sidevideos').load('videos.html .vids', function(){
     $v('.vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
});