Solution 1 :

Can you try this

<video class="vBGex2" src="vBackGround2.mp4" onmouseover="play(this)" onmouseout="stop(this)"></video>

function play(el){
   el.play();
}

function stop(el){
   el.pause();
}

Problem :

Im trying, but have been unable to get the div exbox1 to play a video when I hover over it. This div is not a child or parent of the video div as placing it in there would break my script. This is what I have right now-

HTML

<div class=video>
  <video class="vBGex2" src="vBackGround2.mp4"></video>
</div>

JS

$(document).ready(function() {
  $(".vBGex2").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

CSS

.vBGex2{
  position: absolute;
    z-index: -1;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  min-width: 100%; 
  min-height: 50%; 
    width: 230px;
    height: 300px;
    object-fit: cover;
  position: absolute;
  top: 50%;
  left: 0%;
}

Comments

Comment posted by Massive Boat

No, the video itself plays and pauses when I hover in and out. I am trying to add a separate, independent div that plays the video in the video div when you hover over it.

By