Fancybox gallery problem with mixed media

Fancybox gallery problem with mixed media

I'm trying to add video to a picture gallery. They all have the same rel tag, but all of the pictures present as a gallery, and all of the videos in a separate gallery. When I add "fancybox.iframe" as a class to the <a...'s with video, I can get them all to present in a single gallery - but then my dimension constraints are ignored. Any ideas?

Here's a working example, and here's the code. Thanks in advance... Dan

www.59plymouth.net/lightboxes/fancybox3.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" />
<script src=" http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./source/jquery.fancybox.pack.js"></script>
<style>
.fancybox-type-iframe .fancybox-nav {
width: 60px;
}


.fancybox-type-iframe .fancybox-nav span {
visibility: visible;
opacity: 0.5;
}


.fancybox-type-iframe .fancybox-nav:hover span {
opacity: 1;
}


.fancybox-type-iframe .fancybox-next {
right: -60px;
}


.fancybox-type-iframe .fancybox-prev {
left: -60px;
}


.fancybox-type-iframe .fancybox-padding: 2px;
}


</style>
<script>
$(document).ready(function() {
$('.vids').fancybox({
type : 'iframe',
maxWidth : 700,
maxHeight : 400,
});
$('.pictures').fancybox({
margin : [20, 60, 20, 60], // Increase left/right margin
});
});
</script>
</head>
<body>
<a class="pictures" rel="gallery1" href="./media/1a.jpg"><img src="./media/1_thumb.jpg"/></a>
<a class="vids" rel="gallery1" href="./media/2.mp4"><img src="./media/2_thumb.jpg"/></a>
<a class="pictures" rel="gallery1" href="./media/3.jpg"><img src="./media/3_thumb.jpg"/></a>
<a class="vids" rel="gallery1" href="./media/4.mp4"><img src="./media/4_thumb.jpg"/></a>
</body>
</html>