HTML 5 Videos, with placeholder CSS animation

[DLB]

Hi @mariusjopen / @arminunruh

I have a webpage that have a series of HTML5 videos. Ideally I would like to have a CSS animation with keyframes that appears on the placeholder image before each video loads and starts to play. I've managed to get the CSS animation in position. Please see this link to my page, the animation is on the first row / video only.

Here is the CSS code…

.loading::before, .loading::after {
    content: "";
    background-image: url("https://deslloydbehari.co.uk/wp-content/uploads/2019/08/DLB_Loading_01-04.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    width: 250px;
    height: 250px;
    animation: loading 2.5s ease infinite;
    -webkit-animation: loading 2.5s ease infinite;
}

@keyframes loading {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

I've also added a ‘Custom HTML class’ to the video, for the CSS code to target. I’m not sure if this is the right thing to do? Should I be targeting the placeholder image instead?

I’m having difficultly making the animation stop once the video has loaded, I‘ve tried with some JS code, based on this post, on a similar topic. Here is the JS code, I‘ve used…

<script>
jQuery(document).on("lazyloaded", function(e){
    if( jQuery(e.target.parentNode).hasClass("video, .html5video") ){
        jQuery(e.target).next('.ph').css(".loading");
    }
});
</script>

I do have the ‘Lazy load an image when you scroll to it’ option switch on in Lay options too.

I'm now stuck, so I thought I'd post on this forum. Is what I’m attempting even possible?

Any help or pointers, would be greatly appreciated.

Thanks and best,

Des

[mariusjopen]

Dear @Des
it is a bit complex to jump right in and present you the solution on a silver platter.

But I would work in steps.
First. Good that you have the animation in place.
Then you need to remove it when the lazyload says: All done.

Have a look here for jQuery use:
http://laytheme.com/documentation.html#custom-javascript

Instead of adding anything to the image with Javascript, you can output a console.log("TEST"); to see if the image is loaded. Then you can add a class called invisible to the image.

Hope that gives you a rough direction.

Well done until now!

Best!

Marius