CODEWITHSUNDEEP
jqueryvimeojquery-load
John the Painter
John the Painter

Reputation: 2615

Vimeo embed and .load()

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?

Upvotes: 0

Views: 1644

Answers (1)

John the Painter
John the Painter

Reputation: 2615

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>

Upvotes: 1

Related Questions