Youtube Video & Images IN TOY ColorBox?

I am trying to allow users to click on a group of thumbs that will open a deck of color and display the corresponding image / video. The thumb can refer to an image or video, so the colorbox should (hopefully) display it correctly. My current implementation works, but I have two instances of colorbox, one for video and one for images. I was hoping I could find a way to combine both in the same instance and allow navigation between them ... Is this possible? That's what I'm doing:

<div id="imageGallery">
    <ul id="thumbs">
        @if (!string.IsNullOrEmpty(Model.Youtube))
        {
            <li class="galleryImage"><a href="http://www.youtube.com/embed/@YoutubeId(Model.Youtube)" class="detailColorBox" id="youtubeVideo"
            title=""><img src="http://img.youtube.com/vi/@YoutubeId(Model.Youtube)/1.jpg" alt="image thumb" /></a></li>
        }
        @foreach (var img in Model.Images)
        {
            <li class="galleryImage"><a href="@Html.ResolvePath(img, "710x560")" class="detailColorBox" 
rel="itemDetailGallery"  title=""><img src="@Html.ResolvePath(img, "135x135")" alt="image thumb" /></a></li>
        }
    </ul>
</div>

And inside the script tag:

        $("a[rel='itemDetailGallery']").colorbox();

        $("#youtubeVideo").colorbox({iframe:true, innerWidth:425, innerHeight:344});

PS: I also tried using an iframe with the Youtube video id and displaying it in colorbox, but that also failed.

Any thoughts?