Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to "Hover to an image and the video starts to play muted within the image area"?

enter image description hereI am using wordpress and elementor, I want to have the effect that when users hover to an image, video starts to play muted within the image area, when the mouse hover out the video stop playing, and when we click on the image the video can play full screen. how to write the coding in javascript? I tried to ask chat gpt, but it’s not working:

<script>
var myVideo = document.getElementById("myVideo");
var myImage = document.getElementById("hoverimage");
var container = document.querySelector(".image-video-container");

container.addEventListener("mouseover", function() {
  myVideo.play();
});

container.addEventListener("mouseout", function() {
  myVideo.pause();
});
</script>

but above coding is not working

I copied 피케_’s codes but it only worked once when mouse is over the image disappeared and the video appeared to play, but it’s not the expected video, and when the mouse is moved out, it’s not coming back to the image. codes as below:

<script src="src/index.js"></script>
<div class="wrap">
  Hover over image to play video
</div>
<div id="image-video-container" style="width: fit-content;">
  <img
    id="hoverimage"
    src="https://fastly.picsum.photos/id/703/536/354.jpg?hmac=1NZ7SzrTrnA-1O2S18kJC-IFIOZyYeHt8x98Iqdd5kM"
  />
  <video style="display: none;" id="myVideo" loop="" muted="">
    <source
      src="https://ia902803.us.archive.org/15/items/nwmbc-Lorem_ipsum_video_-_Dummy_video_for_your_website/Lorem_ipsum_video_-_Dummy_video_for_your_website.mp4"
      type="video/mp4"
    />
  </video>
</div>
<script>
  var myVideo = document.getElementById("myVideo");
  var myImage = document.getElementById("hoverimage");
  var container = document.getElementById("image-video-container");

  container.addEventListener("mouseover", function () {
    myImage.style.display = "none";
    myVideo.style.display = "block";
    myVideo.currentTime = 0;
    myVideo.play();
  });

  container.addEventListener("mouseout", function () {
    myVideo.pause();
    myImage.style.display = "block";
    myVideo.style.display = "none";
  });

  container.addEventListener("click", (event) => {
    if (container.requestFullscreen) container.requestFullscreen();
    else if (container.webkitRequestFullscreen)
      container.webkitRequestFullscreen();
    else if (container.msRequestFullScreen) container.msRequestFullScreen();
  });
</script>
Tags:

2

Answers


  1. 0

    Try this approach

    <script>
  var myVideo = document.getElementById("myVideo");
  var myImage = document.getElementById("hoverimage");
  var container = document.getElementById("image-video-container");

  container.addEventListener("mouseover", function () {
    myImage.style.display = "none";
    myVideo.style.display = "block";
    myVideo.currentTime = 0;
    myVideo.play();
  });

  container.addEventListener("mouseout", function () {
    myVideo.pause();
    myImage.style.display = "block";
    myVideo.style.display = "none";
  });

  // this makes video full screen and play when clicked on parent container
  container.addEventListener("click", (event) => {
    if (container.requestFullscreen) 
      container.requestFullscreen();
    else if (container.webkitRequestFullscreen)
      container.webkitRequestFullscreen();
    else if (container.msRequestFullScreen) 
      container.msRequestFullScreen();
  });
</script>

    Basically, you hide the image when mouseover on the parent div and show the video, and when mouseout, hide the video and show the image again.

    Here is a working codesandbox example

    Login or Signup to reply.
  2. 0

    At first get the image and video with same dimension, so that they look fine at same size.

    Set container sized based on image & video and set overflow: hidden to hide image/video going out of container.

    #image-video-container {
  position: relative;
  height: 400px;
  width: 400px;
  overflow: hidden;
}

    Additionally, you can use object-fit: cover; to make fill the container. something like this:

    #image-video-container img {
  position: relative;
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
}


#image-video-container video {
    position: relative;
    display: none;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

    Here is the jsfiddle example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search