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.
  • T Offline
    T Offline
    Tim B
    wrote on last edited by
    #1

    Hello,
    I was working on my site quite a lot recently and will change from vimeo embed to HTML5 videos. Is there a way to keep my custom cursor instead of the pointer that is there by default?

    www.timbieker.com/snipes

    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)

    I searched in the forum already but all the infos weren't specific enough.

    Thanks!

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

      This also occurs with the now new added intro feature. So I guess finding a solution for one might solve the other as well.

      I probably need to adress the right element in css. Right now the cursor gets applied to:

      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;
      }

      1 Reply Last reply
      0
      • 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
                          arminunruhA
                          arminunruh
                          F
                          francesco
                          L
                          lurchifon
                          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