Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Custom Cursor on HTML5 Video

Custom Cursor on HTML5 Video

Scheduled Pinned Locked Moved General Discussion
12 Posts 3 Posters 775 Views
  • 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.
  • RichardR Offline
    RichardR Offline
    Richard
    Global Moderator
    wrote on last edited by
    #3

    Dear @Tim-B

    body {
    cursor: url(http://timbieker.com/wp-content/uploads/2021/01/tb_mousecursor2-e1611082846302.png) 4 12, auto !important;
    }
    
    a {
    cursor: url(http://timbieker.com/wp-content/uploads/2021/01/tb_mousecursor_white-e1611083187935.png) 4 12, auto !important;
    }
    

    "I would like the cursor to stay how it is and only change to my alternative cursor when you can click on something (play icon)"

    When clicking 'play' on your HTML5 Videos you would like the cursor to switch to an alternate?

    Talk soon & have a wonderful day :)
    Richard

    1 Reply Last reply
    0
    • T Offline
      T Offline
      Tim B
      wrote on last edited by Tim B
      #4

      Hi Richard,

      no I would like my cursor to behave the same as on the rest of my page. So the main cursor (currently orange) for everything as well as being over the video div. And then the alternate one (currently white) over the clickable play icon.

      Cheers.

      Add:

      This would also apply to the intro feature as well. There it should be white as well then, as its a "clickable moment"

      1 Reply Last reply
      0
      • RichardR Offline
        RichardR Offline
        Richard
        Global Moderator
        wrote on last edited by
        #5

        Dear Tim! @Tim-B

        This cursor:

        cursor: url(http://timbieker.com/wp-content/uploads/2021/01/tb_mousecursor2-e1611082846302.png) 4 12, auto !important;
        

        It can be allocated to any element.
        You just need to specify, for instance the 'play' i see returns to the standard 'hand' cursor. This is what you don't want and to prevent this we could add:

        img.html5video-customplayicon {
            cursor: url(http://timbieker.com/wp-content/uploads/2021/01/tb_mousecursor2-e1611082846302.png) 4 12, auto !important;
        }
        

        You can find out the element you wish to target when inspecting a page's HTML structure. You can do this with a browsers "developer tools"

        https://www.hostinger.com/tutorials/website/how-to-inspect-and-change-style-using-google-chrome

        Applying the above code to your 'Custom HTML & CSS' area should be correct.

        If you need any help with another part of your website and applying a cursor, let me know and i will do my best to help :)

        Have a wonderful day Tim & best wishes
        Richard

        1 Reply Last reply
        0
        • T Offline
          T Offline
          Tim B
          wrote on last edited by
          #6

          Thank you Richard!

          This worked indeed. Thanks for the tip with inspecting. I couldn't figure out the elements to address them properly in css. Its all trial and error for me regarding this..

          Great to have such kind and super on point help here in the forum!

          Cheers,
          Tim

          RichardR 1 Reply Last reply
          0
          • T Tim B

            Thank you Richard!

            This worked indeed. Thanks for the tip with inspecting. I couldn't figure out the elements to address them properly in css. Its all trial and error for me regarding this..

            Great to have such kind and super on point help here in the forum!

            Cheers,
            Tim

            RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #7

            @Tim-B

            Great :)
            Thank you for being a user of Lay Theme in 2021, its awesome

            Sincerely
            Richard

            1 Reply Last reply
            0
            • A Offline
              A Offline
              Anders
              wrote on last edited by
              #8

              @Richard said in Custom Cursor on HTML5 Video:

              customplayicon

              Hi, is there also a way to make the pointer cursor that appears when you hover the video changed into a custom image?

              -Anders

              1 Reply Last reply
              0
              • A Offline
                A Offline
                Anders
                wrote on last edited by
                #9

                Nevermind, figured it out like this:

                .html5video .html5-video-placeholder-image.h100 img {
                cursor: url(https://myurl.com/wp-content/uploads/2021/03/image.png) 4 12, auto !important;
                }

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  Anders
                  wrote on last edited by
                  #10

                  sorry, like this:

                  .html5video .html5-video-placeholder-image img {
                      cursor: url(https://favoritanimal.com/wp-content/uploads/2021/03/favorit-animal-cursor-green-01.png) 4 12, auto !important;
                  }
                  
                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    Anders
                    wrote on last edited by
                    #11

                    Oh and then if you want the cursor also to be the same when you're hovering the video it would look something like this:

                    .html5video video.playpauseonclick {
                        cursor: url(https://favoritanimal.com/wp-content/uploads/2021/03/favorit-animal-cursor-green-01.png) 4 12, auto !important;
                    }
                    
                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by Richard
                      #12

                      Dear @Anders

                      Great :)
                      Thank you for the update!

                      Sincerely
                      Richard

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      A
                      alasdair17
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search