CODEWITHSUNDEEP
htmljqueryvideomouseover
Maria
Maria

Reputation: 1

Starting a video by hovering over a div

I used this solution to start videos (each separately) when I hover them:

//play video on hover
$(document).on('mouseover', 'video', function() { 
$(this).get(0).play(); 
}); 

//pause video on mouse leave
$(document).on('mouseleave', 'video', function() { 
$(this).get(0).pause(); 
});

It works really nice. But actually I want to start a video when I hover its titles (so another div, start each video separately when hovering its own titles). Does anyone has a solution for that?

I have my Titles in a div called »video-titles« and my videos embedded like this:

<HTML Embed>
 <div id="w-embed">
 <video class="video" position= "absolute" top= "0px" margin= "0 auto" height= "auto" width= "100%" preload="auto" muted loop>
 <source src="myvideo.mp4" type='video/mp4;' />
 </video>   
 </div>

Here is my site:https://monkeyberlin-preview-3a28-d94aa03c105a2.webflow.io/ Cheers and thanks for the help!

Upvotes: 0

Views: 863

Answers (2)

Hassan Mehmood
Hassan Mehmood

Reputation: 57

Yes, here is an example to play a video when you hover its title.

$(document).ready(function() {
  $(".video_inside h3").hover(function() {
    $(this).parent().children('video')[0].play();
  }, function() {
    var el = $(this).parent().children("video")[0];
    el.pause();
    el.currentTime = 0;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video_inside">
  <video preload="auto" muted="muted" loop>
        <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
        <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    </video>
  <h3>Video Title</h3>
</div>

Note: make sure to paste the JS code below the jQuery file.

Upvotes: 1

Ankita Kuchhadiya
Ankita Kuchhadiya

Reputation: 1282

You can use like this

$(document).ready(function() {
  $('#title').hover(function() {
    $('#video').get(0).play(); 
    }); 
  });

Upvotes: 0

Related Questions