Show and hide videos while hovering over text

Asked

Viewed 40 times

0

The effect would be similar to "Tooltip" as shown below, but would show a video already with self-play while the mouse was over the word, while scrolling the mouse outside the word the video would be hidden/finished.

No styles will be required as shown in the example, the video needs to be shown somewhere around the text where the mouse is over.

There will be several videos in different words, the same words quoted throughout the text will show the same corresponding video, example: The noun word will be shown several times, and they will all have the same video.

As if the explanation of a few words in an HTML text, would display a video when the mouse is over it.

Example of Tooltip (I believe this command will not be maybe onmouseover)

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<!DOCTYPE html>
<html>

<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Thanks for the help.

html

1 answer

0

try this:

HTML:

<p>text</p>
<video src="myfile.mp4"/>

JS:

var p = document.getElementsByTagName("p");
p[* /*este é o numero do <P> sendo 0 o primeiro p,e 9 o décimo*/].onmouseover = function() {
    var video = getElementsByTagName("video");
    video[*].style.overflow = "visible";
}

  • That’s what you wanted?

  • Guy picking up the element by ID if he has 10x the same word he’ll have to have 10 different Ids! And replicate this JS 10x, the ideal would be to do by class and not by ID

  • Hold on, I’m gonna reform the code...

  • Okay, something like this?

  • Eduapps, the implementation was good and is working. But I have a problem: 1) How are many videos the page loads all before they start to work, how to load up demand, that is, load only those where the mouse is positioned over the words? 2) There is a solution for the video to stay inside the page, because if the text containing the video is too far left, when placing the mouse, the page gets a horizontal scroll bar to support the video. Thank you!

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.