Custom Cursor on HTML5 Video

[Tim B]

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

[Richard]

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

[Tim B]

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"

[Richard]

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

[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

[Richard]

@Tim-B

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

Sincerely
Richard

[Anders]

@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

[Anders]

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

[Anders]

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

[Anders]

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

[Richard]

Dear @Anders

Great :)
Thank you for the update!

Sincerely
Richard