CODEWITHSUNDEEP
htmlvideohovermouseovermouseout
AFG
AFG

Reputation: 13

How to make videos play on mouseover and pause on mouseout?

I would like to make my videos play on mouseover and mouseout. I have about 4 videos on my page. My HTML looks something like this:

<div class="project-container">
    <video class="content" controls loop>
          <source src="videos/THESIS_VIDEO.mov">
    </video>
</div>

Thanks!

Upvotes: 1

Views: 7084

Answers (1)

Adam Hoffman
Adam Hoffman

Reputation: 793

Had to steal a working video to play with since I don't have your project ones... change it back:

<div class="project-container">
    <video class="content" controls loop onmouseover="this.play()" onmouseout="this.pause();" >
          <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
    </video>
</div>

Fiddle: https://jsfiddle.net/2n3auu06/12/

Upvotes: 5

Related Questions