Html Question posted in
Some basic documentation can be found here.

How do I use the same java script for 2 different elements in html

Right now only the first mp4 works with this, the second one doesnt. Honestly the stylesheet part is not that important, I don’t mind if it gets cut out cause it’s hard to do or something. I don’t have the skills to implement other solutions that other have found so I am asking myself.

index.html:

    <div class="main-container">
        <div class="video-container">
          <video src="honda/honda adv.mp4"></video>
          <div class="hover-text active"><b>Autoturisme</b></div>
        </div>
      </div>
  
      <script src="main1.js"></script>


      <div class="main-container">
        <div class="video-container">
          <video src="honda/honda engine.mp4"></video>
          <div class="hover-text active"><b>Motoare</b></div>
        </div>
      </div>
  
      <script src="main2.js"></script>

style1.css (same code as style2.css at this moment):

.main-container {
  position: relative;
  width: 400px;
  top:-350px;
  left: -550px;
  margin: 40px auto;
  font-family: "Roboto", sans-serif;
  border-radius: 10px;
}

.video-container {
  position: relative;
}

.video-container video {
  width: 100%;
}

.video-container .hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(calc(-50% - 24px), -50%);
    background: #ff0019;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 4px 4px 50px -4px rgba(0, 0, 0, 0.8);
    opacity: 0;
    letter-spacing: 0.8px;
    transition: all 400ms ease;
  }
  
  .video-container .hover-text.active {
    opacity: 1;
    letter-spacing: 0;
    transform: translate(-50%, -50%);
  }

main1.js (same code as main2.js):

const video = document.querySelector(".video-container video");
const hoverText = document.querySelector(".video-container .hover-text");

video.addEventListener("mouseenter", () => {
  video.play();
  hoverText.classList.remove("active");
});

video.addEventListener("mouseleave", () => {
  video.pause();
  hoverText.classList.add("active");
});
Tags:

2

Answers


  1. 0

    You can write a plugin function that takes a container selector.

    Now, load the plugin into the HTML and then invoke it. Just make sure the plugin script runs before you call VideoPlugin().

    .video-container > video { background: black; }

.hover-text.active { color: green; }
    <!-- Load plugin -->
<!-- <script src="video-plugin.js"></script> -->
<script>
/* Plugin defined in video-plugin.js */
const VideoPlugin = (selector = '.video-container') => {
  const addListeners = (videoContainer => {
    const video = videoContainer.querySelector("video");
    const hoverText = videoContainer.querySelector(".hover-text");

    video.addEventListener("mouseenter", () => {
      video.play();
      hoverText.classList.add("active");
    });

    video.addEventListener("mouseleave", () => {
      video.pause();
      hoverText.classList.remove("active");
    });
  });
  document.querySelectorAll(selector).forEach(addListeners);
};
</script>

<div class="main-container">
  <div class="video-container">
    <video src="honda/honda adv.mp4"></video>
    <div class="hover-text"><b>Autoturisme</b></div>
  </div>
</div>
<div class="main-container">
  <div class="video-container">
    <video src="honda/honda engine.mp4"></video>
    <div class="hover-text"><b>Motoare</b></div>
  </div>
</div>

<!-- Execute the plugin -->
<script>
  VideoPlugin(); // The selector defaults to '.video-container'
</script>
    Login or Signup to reply.
  2. 0

    You can use two different sets of IDs to address them in ".js" files. But I guess there may be a better and professional way to handle this scenario.

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

Back To Top
Search