Vimeo embed and .load()

Question

I have an overlay set up on my site, which covers the whole site and fades out once the page has loaded. A simple, yet effective way to remove any visual layout adjustments. I am doing this by the following:

<div id="overlay-preload"></div>

#overlay-preload {
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

$(window).load(function() {
    $('#overlay-preload').fadeOut('fast');
});

However, the only issue is that I have some Vimeo embeds on the page and even though the entire site has loaded... the Vimeo embed(s) haven't and they seem to take forever to fully load. So, my question.

Can you specific .load() to include everything BUT a specific item (in this case, an iframe) OR is there a better way to do this?

Answer 1

I'm trying this, which seems to work successfully...

$(window).load(function() {
    $('#overlay-preload').fadeOut('fast', function() {
        $('.each-blog-video-container').each(function() {
            var videoData = $(this).find('span').attr('data-video');
            $('.each-blog-video-container').append(videoData);
        });
    });
});

<div class="each-blog-video-container">
    <span data-video='<iframe src="//player.vimeo.com/video/<?php the_field('video'); ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=ffff00" width="540" height="304" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'></span>
    </div>