CODEWITHSUNDEEP
javascripthtmlvideo
marteteigen
marteteigen

Reputation: 7

Play video when mouse hovers trigger object

I'm designing a page where i want the video for each post to play when the user hovers the post. I've set it up like this:

<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
   
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>

</div>
</div>

<script> 
$(document).ready(function() {
  $(".playonhover").on("mouseover", function(event) {
    this.play();

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

  });
})
</script>

This works, but I actually want the video to play when the top div (class .project-link-block) is hovered, not the video itself. Is there any way to do this? Switching the class in the JS didn't work. Using Webflow for this, in case it's relevant.

Upvotes: 0

Views: 1136

Answers (2)

VC.One
VC.One

Reputation: 15936

See if this code below achieves your expected result. Then convert to JQuery (if required).

<!DOCTYPE html>
<html>
<body>

<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">

<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" 
>

Your browser doesn't support HTML5 video tag.
</video>

</div>
</div>

<script> 

window.addEventListener( "load", on_documentReady );

function on_documentReady() 
{
    //const myTargets = document.getElementsByClassName("playonhover");
    const myTargets = document.getElementsByClassName("project-link-block");

    for (var i = 0; i < myTargets.length; i++) 
    { 
        myTargets[i].onmouseover = handle_mouseOver;
        myTargets[i].onmouseout = handle_mouseOut;
    }
}

function handle_mouseOver( evt ) 
{
    //alert( "## was rolled over" );
    evt.target.play();
}

function handle_mouseOut( evt ) 
{
    //alert( "## was rolled out" );
    evt.target.pause();
}

</script>

</body>
</html>

Upvotes: 0

Orius
Orius

Reputation: 1093

Did you also change this when you switched the class? Once you switch the class, the video element is no longer this.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
  <div class="video-cover">
    <video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
      <source
        src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
        type="video/mp4">
      Your browser doesn't support HTML5 video tag.
    </video>
  </div>
</div>
<script>
  $(document).ready(function () {
    $(".video-cover").on("mouseover", function (event) {
      $(".playonhover").get(0).play();
    }).on('mouseout', function (event) {
      $(".playonhover").get(0).pause();
    });
  })
</script>

Upvotes: 1

Related Questions