Next Button does not appear after video has ended

For my survey I’m trying to include that the participants have to click when the video starts and also are only able to press the next button after the video has ended. However, after the video has ended, the button does not appear. Can somebody help me?

Here’s my JavaScript:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Hide NextButton*/
	var that = this;
	this.hideNextButton();

    var startButton = document.getElementById('startButton');
	var video = document.getElementById('autoplay-video');

    // Hide the start button and play the video when it's clicked
    startButton.addEventListener('click', function() {
      video.play();
      startButton.style.display = 'none'; // Hide the button
    });


	video.addEventListener("ended", function() {
        that.showNextButton();
      });

    // Prevent right-click context menu
    document.addEventListener("contextmenu", function(e) {
      e.preventDefault();
    });

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

And my HTML:

<video class="qmedia" id="autoplay-video" controls="true" height="600" preload="auto" width="1000">
    <source src="https://baselpsychology.eu.qualtrics.com/CP/File.php?F=F_2bnL6eDk8pCHIEu" type="video/mp4">
    <embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://baselpsychology.eu.qualtrics.com/CP/File.php?F=F_2bnL6eDk8pCHIEu" type="video/quicktime" width="1000">
</video>