WordPress Play Video on Hover

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}
#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('http://www.hellozee.com/wp-content/uploads/2017/05/Screen-Shot-2017-05-15-at-1.08.13-PM.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="http://www.hellozee.com/wp-content/uploads/2017/05/mute-day-gif-rollover.mp4" type="video/mp4">
      
    Your browser does not support the video tag.
    </video>

</div>

I’m kind of new to coding and don’t quite understand why WordPress doesn’t allow me to do “raw coding”. I’m trying to play the background video, only, if you hover over the video. If your mouse moves away from the video it should hide.

Read more here: WordPress Play Video on Hover

Leave a Reply

Your email address will not be published. Required fields are marked *