How to play video on hover (in 25% width increments) - html

Question

I recently found this question:
How to hide video on div hover?
And it perfectly shows what I need for a website right now.
My question is,
is this possible with 4 videos as well, or is that strecthing it?
I would need every quarter of the video with to display a different (short) video.
Unfortunately I'm still a beginner in HTML and CSS so I hope someone can help me with this
The code from the answer on the original thread is posted below.
$('.video_wrapper .video_hover').hover(function() {
$('.video_wrapper').addClass('isHover');
}, function() {
$('.video_wrapper').removeClass('isHover');
});
.video_wrapper {
overflow: hidden;
position: relative;
}
.video_wrapper video {
height: auto;
width: 100vw;
}
.video_wrapper .eat_video {
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
.video_wrapper .video_hover {
bottom: 0;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
}
.video_wrapper .live_video,
.video_wrapper .eat_video {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.video_wrapper.isHover .live_video {
opacity: 0;
}
.video_wrapper.isHover .eat_video {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
<div class="live_video">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
</div>
<div class="eat_video">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
</video>
</div>
<div class="video_hover"></div>
</div>

Answer 1

Welcome to Stackoverflow Jos,You can use mouse enter and leave event to achive this.
const video = document.getElementById('myvideo');
video.onmouseenter = function(){
if(video.paused){
video.play();
}
}
video.onmouseleave = function(){
if(!video.paused){
video.pause();
}
}
.video_wrapper{
overflow: hidden;
position: relative;
}
.video_wrapper video{
height: auto;
display:block;
margin:auto;
}
.video_wrapper .eat_video{
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
.video_wrapper .video_hover{
bottom: 0;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
}
.video_wrapper .live_video,
.video_wrapper .eat_video{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#myvideo:hover{
cursor:pointer;
transform:scale(1.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
<div class="live_video">
<video loop muted class="video" id = 'myvideo' preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
</div>
</div>

Answer 2

"How to play video on hover (in 25% width increments)"
In HTML...
Create a <div> that is a container for your four <video> tags.
In Javascript...
Add a mousemove listener to your Div and then extract the mouse X position into some variable.
Divide the width (eg: from .clientWidth value) of the Div by 4 (to get the required four 25%).
When the mouse moves you check the X-pos variable to see which quadrant the pointer is at. This means using ratios and modulo operator to get a number result between 1 and 4.
Use the result number to tell a specific video tag to be .visble (and the rest become .hidden).
PS: I recommend also having a text on screen to show the number for the mouse position over the Div, so you can see what the computer sees. Use a Div's .innerHTML or .innerText to add text.
Update your code with a specific attempt at the above-listed points and I will help you with the part(s) where you're stuck. Ask anything when in doubt about your video/mouse code's issues.

Answer 3

I am sure that this is exactly what you're looking for. : )
Hope this helps.
$('.video_wrapper').on("mousemove", function (event) {
if(event.pageY <= $('.video_wrapper').height()){
if(event.pageX <= $('.video_wrapper').width()/4){
$('.video_clip').removeClass('isHover');
$('.first_video').addClass('isHover');
} else if(event.pageX <= $('.video_wrapper').width()/2){
$('.video_clip').removeClass('isHover');
$('.second_video').addClass('isHover');
} else if(event.pageX <= $('.video_wrapper').width()*3/4){
$('.video_clip').removeClass('isHover');
$('.third_video').addClass('isHover');
} else {
$('.video_clip').removeClass('isHover');
$('.fourth_video').addClass('isHover');
}
}
});
$('.video_wrapper').on("mouseleave", function (event) {
$('.video_clip').removeClass('isHover');
$('.first_video').addClass('isHover');
});
.video_wrapper {
overflow: hidden;
position: relative;
}
.video_wrapper video {
height: auto;
width: 100vw;
}
.video_wrapper .video_clip:not(.first_video) {
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
.video_wrapper .video_clip {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.video_wrapper .video_clip {
opacity: 0;
}
.video_wrapper .isHover.video_clip {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
<div class="video_clip first_video isHover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
</div>
<div class="video_clip second_video">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
</video>
</div>
<div class="video_clip third_video">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
</div>
<div class="video_clip fourth_video">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
</video>
</div>
</div>