onmouseover - Play event does not work in HTML and Javascript

I have a problem with my javascript code, maybe you can find what I'm doing wrong. My Play() event does not do what I want.

I want to "re-make" a page of the ferrari site with an onmouseover event. This code is written with a HTML widget inside of elementor, maybe is that the reason why something isn't working.

Hope to hear from you!

My code;

<div class="wrapper1" >
    <video id="Hvideo" width="320" height="240" preload="auto">
        <source src="https://www.youtube.com/watch?v=HJVHZR3KkjM" type="video/mp4">
    </video>
    <button id="Htext" onmouseover="Play()" onmouseout="Pause()">HVAC</button>
</div>
<script type="text/javascript">
    var Htext=document.getElemenetById("Htext");
    var Hvideo=document.getElemenetById("Hvideo");
    
    function Pause(){
    Hvideo.pause();
    }
    
    function Play(){
    if(Hvideo.paused)
        Hvideo.play();
    }
</script>

image

source