John Davidson

Message:

When the mouse hovers over a div a video will play. Everything works fine but the video only plays on the first "player". I can see the thumbnail on every player but they don't start to play. Why is this happening?

<?php

    foreach($posts as $post)

    {

      $vimeoid = get_field('film_vimeo', $post, true);

      if (empty($vimeoid)) 

      {

        $projektclass = "not-vimeo";

      }

      else 

      {

        $projektclass = "vimeo";

      } 



      //echo '<div id="hp-post"><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></div>';

      echo '<div class="'.$projektclass.'" style="position: relative;" id="hp-post">';

      echo get_the_post_thumbnail( $post, 'full' );

      echo '<div id="'.$vimeoid.'"><iframe class="vimeoplayer" id="'.$vimeoid.'" style="position: absolute; z-index:-1;" src="https://player.vimeo.com/video/'.$vimeoid.'?title=0&byline=0&portrait=0&background=1&autoplay=0 width="100%" height="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';

    }

    echo '</div>';

  }

?>

jQuery(document).ready(function() {

  var vimeo = document.getElementsByClassName('vimeo')[0];

  var player = new Vimeo.Player(vimeo);



  vimeo.onmouseover = function() {

    return player.play();

  };

  

  vimeo.onmouseout = function() {

    return player.pause();

  };

});

---

My Answer:
element and not on the other elements. This is because the code is targeting the first element only. To make it work for all elements, you need to modify the code to target all elements.

Here's an example of how you can achieve this:

HTML:
html

CSS:
css
.video {
display: none;
}

.video.playing {
display: block;
}


JavaScript:
javascript
document.querySelectorAll('.video-container').forEach(function(container) {
var video = container.querySelector('.video video');

container.addEventListener('mouseenter', function() {
video.play();
video.classList.add('playing');
});

container.addEventListener('mouseleave', function() {
video.pause();
video.currentTime = 0;
video.classList.remove('playing');
});
});


This code will target all elements with the class "video-container" and play the video inside each container when the mouse hovers over it. Make sure to replace "video1.mp4" and "video2.mp4" with the actual video file paths.