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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: