HTML 5 Videos, with placeholder CSS animation
-
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
-
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-javascriptInstead 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
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it