How to hover on text to have a video appear and play?

Question

I want to hover on text and have a video appear and play when the user hovers and when you are not hovering, the video would disappear.

I found the following on codepen which does work for both images and video when hovering on specific text, but when I copy the HTML code to list another video since I don't want this for images the next video won't play. It will only play the first video listed. Please help!

function vidPlay() {  
  $("#video1").get(0).play();  
};
function vidPause() {
    $("#video1").get(0).pause();
};
$(document).ready(function(){
  $("#textToggler").click(function(){
    $(".toggleText").toggle();
  });
});
function toggleImage() {
  $(".hiddenclickimg").toggle();
};

.hiddenimg {
  display: none;
}

.hiddentxt {
  font-weight: bold;
  color: #F00;
  z-index:99;
}

.hiddentxt a {
  color: #F00;
  text-decoration: none;
  z-index: 99;
}

.hiddenclick {
  font-weight: bold;
  color: #F00;
  text-decoration: none;
  cursor: pointer;
}

.hiddenclick a {
  color: #F00;
  text-decoration: none;
}

.hiddenclick a:visited {
  color: #F00;
  text-decoration: none;
}

.hiddentxt:hover ~ .hiddenimg {
  display: block;
  position: absolute;
    z-index: 2
}

.hiddenclickimg {
  display: none;

}


  


  
    Hover to see a banana.
  
  
    Let's see if it works with videos. (The video should play when it's displayed, but sometimes it takes a while to load.)
    
  
   Click here to show image.

user_383904 · Answer

Use classes instead of ID. IDs (as the name suggests) should be unique.
Here's an example how to hover to play/pause multiple videos - without the unnecessary jQuery:

const ELS_aVid = document.querySelectorAll(".hoverVid");

const toggleVideo = (ev) => {
  const EL = ev.currentTarget;
  const EL_video = EL.querySelector("video");
  const isPlay = ev.type === "mouseenter";
  EL_video[isPlay ? "play" : "pause"]();
};

ELS_aVid.forEach(EL => {
  ["mouseenter", "mouseleave"]
    .forEach(evt => EL.addEventListener(evt, toggleVideo))
});

.hoverVid  {
  position: relative;
}

.hoverVid video {
  position: absolute;
  height: 150px;
  top: 100%;
  left: 0;
  z-index: 1;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);

  /* "hidden" and prepared animation state*/
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.hoverVid:hover video {
  /* on hover, animate into view */
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
}


  Hover to watch video
  




or if you feel like 


  watch the same video again LOL

Search for any JavaScript Method you don't understand (like i.e: querySelectorAll or forEach) on the MDN Docs

How to hover on text to have a video appear and play?

1 Answers