onclick is not calling function

Question

I'm trying to make a button that covers the whole screen, which is a video acting as a background, that when clicked is supposed to pause the video.

Even though the cursor is "marking" the (invisible) button and my code seems correct (which it obviously isn't) nothing is happening.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
            #button { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
            #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
        </style>
    </head>
    <body>
        <video autoplay loop muted id="myVideo">
            <source src="video.mp4" type="video/mp4">
        </video>
        <button id="button" type="button" onclick="myFunction()"></button>
        <script>
            var video = document.getElementById("myVideo");
            function myFunction() {
                video.pause();
            }
        </script>
    </body>
</html>

I don't think you should make a button that covers the whole screen, instead use `` — Yousername, Dec 23 '19 at 19:27
Does this answer your question? [Clicking HTML 5 Video element to play, pause video, breaks play button](https://stackoverflow.com/questions/18326973/clicking-html-5-video-element-to-play-pause-video-breaks-play-button) — AndrewL64, Dec 23 '19 at 19:31

score 0 · Accepted Answer · answered Dec 23 '19 at 19:31

Here it works. Not sure what went wrong.

var video = document.getElementById("myVideo");
function stopVideo() {
    video.pause();
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
            #button { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
            #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
        </style>
    </head>
    <body>
        <video autoplay loop muted id="myVideo">
            <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" type="video/mp4">
        </video>
        <button id="button" type="button" onclick="stopVideo()"></button>
    </body>
</html>

Yup, seems like it was an issue on my side. Sorry and thank you! — wilmerjohansen, Dec 23 '19 at 19:41

onclick is not calling function

1 Answers1