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 >
    <video muted  autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>
  <div >
    <video muted  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 ></div>
</div>

CodePudding user response：

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 >
     <video loop muted  id = 'myvideo' preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>     
</div>

CodePudding user response：

"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.