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();
}
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();
}
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%;
}
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.