Hide next button until Youtube Video (inserted via HTML) is finished playing

Right now, my next button is hidden, but never appears.
My HTML code is:




My JS code is:
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.getChoiceContainer().hide();
});


Qualtrics.SurveyEngine.addOnReady(function()
{
var my_vid = document.querySelector("myvid");
const player = new Youtube.Player("myvid");
that = this;

player.on("play", function () {
my_vid.style.pointerEvents = "none";
});




player.on("ended", function () {
that.showNextButton();
});
});


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


});

You can add a timer question and hide the next button in the logic itself. Let me know if this works for you!

https://community.qualtrics.com/XMcommunity/discussion/comment/51956#Comment_51956Hi grahulp5 ,
Thanks for the info!
Unfortunately, this will not work for my project. I tried the timer question, but it does not adjust for video buffering or pauses. When either happen, my survey-takers end up seeing the next button too early.

Hi MadelineB,
I am not familiar with the Youtube API but I imagine the syntax is different to the Vimeo one in your links (which I think some of your code is borrowed from). The documentation suggests to me that you could maybe do something similar:
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an