CODEWITHSUNDEEP
videotexthovermouseover
Tim
Tim

Reputation: 91

How to make a text hover to play a video

I have a question about the JavaScript onmouseover event. I want to make a difficult onmouseover event to play a video. What I want to do is to play a video when I hover over a text.

source: https://www.ferrari.com/

when you click on car and hover over one of the models you see what I mean.

Thank you!

The new information;

my code:

<div id="text1">
    <h1>Nummer 1</h1>
</div>

<div id="movie1">
    <video width="320" height="240">
        <source src="https://www.spiralex.nl/wp-content/uploads/2020/12/oil-and-gas-set-1cx2641.mp4" type="video/mp4">
    </video>
</div>

<script type ="text/javascript">

    var text1 = document.getElementById = "text1"
    var movie1 = document.getElementById = "movie1"
    
    
    text1.onmousever = function(){
        movie1.play
    }
    
</script>

I'm stuck in the mouseovereffect because i don't know how to link it with my video.... I'm also using Elementor pro with a HTML widget, maybe that's the issue. Screenshot source Screenshot source

this is the part I meant. When you're hover over a car model, the video about this model is starting to play.

Upvotes: 1

Views: 216

Answers (1)

PixelatedCoder
PixelatedCoder

Reputation: 11

your movie1 object is refering to the div not the tag itself and also you need to use addEventLister and listen for the mouseover event

<div id="text1">
    <h1>Nummer 1</h1>
</div>

<div>
    <video width="320" height="240" id = "movie1">
        <source src="https://www.spiralex.nl/wp-content/uploads/2020/12/oil-and-gas-set-1cx2641.mp4" type="video/mp4">
    </video>
</div>

<script type ="text/javascript">

    var text1 = document.getElementById("text1")
    var movie1 = document.getElementById("movie1")
    text1.addEventListener("mouseover", ()=>{
      movie1.play();
    })
</script>

Upvotes: 1

Related Questions