Video Content Causing Preloader Animation Glitches

I have a simple animation occurring when the page starts to load. Basically, the nav bar moves down and into view.

The problem i’m having is that the animation lags A LOT on IOS. And i’ve pinpointed the root of the problem. Any video, whether a video component, background video, or iframe in an embed code component, causes this animation lag to occur. If i remove the video (it exists further down the page) the preloader animation looks great.

Does anyone know what the reason for this could be and is there a work-around?

Hey @bryce.travis, the lag is likely caused by simultaneous load of assets. Can you please share your read only link for us to see your animation settings?

Otherwise, you can try to move the animation from Page is Ready to Page is loaded.

https://preview.webflow.com/preview/fragment-23f6c8?utm_medium=preview_link&utm_source=designer&utm_content=fragment-23f6c8&preview=841751993c0d7a2e12a8d5a9f1b62a04&pageId=5ea8b233ecdbea6d5d642312&itemId=5ea8b237e1f8e978c35becad&mode=preview

Hey Danny,

To clarify a bit more, I could put this as a ‘page is loaded’ animation, but then the header is not visible until all the assets on the page have loaded. My other option is a preloader, but i was hoping to avoid that if at all possible.

Hey bryce, your other option would be deferring the video load instead with jquery.

Would something like this do the trick?

<script>
function init() {
var vidDefer = document.getElementsByTagName('video');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

I think that wouldn’t work because its allowing the video to load first and get you getAttribute. Feel free to test it out though, not really an expert. Could you share a published link of the page with videos?

I was thinking something simpler like this:

$(window).on('load', function(){
   vidDefer.setAttribute('src', useWebflowCMSLinkField)
})

Or

You can use a placeholder Html Embed to carry the Links and then use custom code to turn them into videos.

Else, you can look into lazyloading GitHub - verlok/vanilla-lazyload: LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading. or Imagekit.io

https://preview.webflow.com/preview/fragment-23f6c8?utm_medium=preview_link&utm_source=designer&utm_content=fragment-23f6c8&preview=841751993c0d7a2e12a8d5a9f1b62a04&pageId=5ea8b233ecdbea6d5d642312&itemId=5ea8b237896d3d07a559ff61&mode=preview

I tried the code I pasted and the videos are not showing on iOS no, but here’s the link. The third image shows a Black frame and within that I have an html embed code with my video. Further down there’s another video which is also no longer showing.

Hey Bryce, I have found another solution to load the videos later.

I’m using Youtube since Vimeo is blocked in my country but it should be similar.

Here is the code Im working with, using Youtube’s embed code instead of Webflow’s video element.

var link1 = 'https://www.youtube.com/embed/hY1a94niwpY' //You can replace with CMS variable here for vimeo link 1

$(window).on('load',function(){
$('.video1').html(
`<iframe width="560" height="315" src=${link1} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
)
})

You can see it loading as it should here.
https://prototype-density.webflow.io/

I guess you should be able to replicate using Vimeo’s embed link.

Hey Denny,

So to clarify the setup. I’ll add a div with the class .video1 and below it i’ll add an html embed with this script? I’ve tried this with your youtube link as a test and its not showing, but i’m not well versed with jquery, so i’m probably making a simple mistake. Is it possible to see your read only link for this? Thanks so much for the help.

So, i got that code to work. The problem is the main issue of getting the nav to animate smootthly is still laggy.

Hey @bryce.travis, I know you’ve pinpoint the issue to be on videos but you can also try is to reduce the size of your image. Some of them are too large at 400kb++ & 1mb. Ideally you would keep them at ~100kb and max less than 250kb.

I don’t know if this will help but there’s no harm and it’ll greatly save your site load speed :slight_smile:

Also, you can experiment with moving the Animation to When page starts loading Screen Shot 2020-05-03 at 18.32.18

Having it at When page finishes loading conflicts with the Video load on $(window).on('load'...

Thanks Denny,

I will definitely compress some of the jpegs. I ended up just delaying the videos by 2 seconds and that solved everything. It’s not a big deal as they’re a little further down the page.

   var link1 = 'https://player.vimeo.com/external/413313972.hd.mp4?s=6290fc7bb8d1b920fbcc7a6949c9ef00dbeda25c&profile_id=175' //You can replace with CMS variable here for vimeo link 1

    setTimeout(function(){
      $('.video0').html(
`<video data-src=${link1} autoplay="" loop="" width="100%" muted="" playsinline="" data-ll-status="loaded" src=${link1}></video>`
)
    }, 2000);
1 Like