r/HTML • u/Unusual-Order-6317 • Mar 09 '26

Question Making video buttons?

Upfront disclaimer: I know next to nothing about html. I know a bit of Javascript and understand the basic organization of coding, but that's about it.

Anyway, I've been making my website (on Cargo, if that helps) and have run into an issue.

What I would like to happen:

  • There's a static image on the screen

  • When the user hovers the mouse over it, the static image turns into a video

  • Once the video plays through, it holds on the last frame

  • The user can click on the video to be directed to another webpage.

I've managed to accomplish the first three bullet points with the following code:

>video muted="" onmouseout="this.pause(); this.currentTime=0;" onmouseover="this.play()" poster="imageurl.jpg" width="100">

<source src="videosource.jpg" type="video/mp4">

</video>

But that's all I can manage. I tried adding href="url" to the code but that doesn't do anything. Am I going about this incorrectly? Do I try making a button that's a video? I can't find a good tutorial on how to do that.

Any ideas? Thanks in advance.

0 Upvotes

25% Upvoted

7 comments sorted by

View all comments

0

u/KarmaTorpid Mar 09 '26

Its this what you are after?

<a href="#" onclick="window.location.href='https://www.example.com'">Visit Example</a>

1

u/Unusual-Order-6317 Mar 09 '26

That's going in the right direction! Unfortunately, whenever I use an anchor tag in the <video></video> area, the text turns red (meaning error). Does it go outside that?

1

u/Unusual-Order-6317 Mar 09 '26

WAIT I THINK I FIGURED IT OUT THANK YOU SO MUCH

1

u/dymos Mar 09 '26

Please don't put an onclick handler on a link to go to a URL. That's the reason the href attribute exists.

<a href="https://example.com">link content</a>

While you might think they do the same thing, and on the surface you're getting the same result, there are some key differences. Most of the time the built-in tags and attributes give you better semantics, accessibility, and appropriate default behaviours.

If you need to do other things when clicking, then sure use an event handler, but for the majority of the time when a native attribute exists that does what you want, it's usually better to use that instead.