-1

I have a film portfolio where I want to display some content in video on the front page instead of still images. To do this I have changed a few of my featured images to video with the help of the plugin Featured Video Plus. I get this working but I can get the videos to play automatically on load but wish to change this so that it instead plays on mouse hover.

Here's the code I'm using: 

window.onload=function(){
var video = document.getElementByClassName('wp-video-shortcode')
viewport.addEventListener('mouseover', function() { video.play() }, false);
viewport.addEventListener('mouseout', function() { video.pause() }, false);
}

The website I'm trying to get this to work on is www.nordenson.nu

The end function I would like to achieve is that the image links to the individual page item of each portfolio item and that the video plays only on hover and not automatically on load.

Many thanks for any help.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445

1 Answers1

2

You are adding event listener to viewport which is not defined in the function. Give all such items a class name. Get all elements by class name, iterate through each item, and attach the event listener.

   window.onload = function(){
      let video = document.getElementByClassName('wp-video-shortcode')
      for (let i = 0; i < video.length; i++) {
        video[i].addEventListener('mouseover', function() { video.play() }, false);
        video[i].addEventListener('mouseout', function() { video.pause() }, false);
      }
   }

Event listener on class name

Dileep
  • 174
  • 8