jQuery OEmbed callback

Question

Hi,

I am using the jQuery OEmbed plugin and jCarouselLite to display a scrollable list of videos.

I am using a callback function to apply the carousel:

    <div class="carousel">
    <ul>
        <% foreach (var video in (string[])ViewData["videos"]) {  %>
                <li>
                    <a href='<%=video %>' class="oembed"></a>
                </li>
        <%} %>
    </ul>
</div>    


<script type="text/javascript">
    $(document).ready(function() {
        loadvideos();
    });

    function loadvideos() {
        $(".oembed").oembed(null,
        {
            embedMethod: "append",
            maxWidth: 1024,
            maxHeight: 768,
            vimeo: { maxWidth: 200, maxHeight: 200 }
        }, createcarousel());

    }

    function createcarousel() {
        $(".carousel").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            circular: false,
            vertical: true
        });
    }


</script>

The problem is that the callback function seems to execute before the videos are rendered on the page so jCarouselLite does not caclulate the height of the items automatically. So far I have got round this by setting a fixed height on the list item.

However, the videos may vary in height so ideally I would like to set the height of the container to the height of the loaded video.

Any ideas?

Thanks, Ben