Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    HTML 5 Videos, with placeholder CSS animation

    General Discussion
    2
    2
    125
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      DLB last edited by

      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

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        Post a link to where the problem is
        I don't answer or check forum DMs, please just post on the forum.
        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

        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

        Thanks!

        Online Users

        K
        Q
        L

        Recent Topics

        • L

          HTML

        • M

          Burger menu in desktop and tablet view

        • M

          WPForms Lite not working with new theme update (5.5.5)

        • K

          remove licence from old site

        laytheme.com