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
