Hi gang.

A play link
http://play2.textadventures.co.uk/Play.aspx?id=editor/f947e16f-c306-460f-bd9e-9012e840d1fc%2fChapel+Perilous+Into+the+Labyrinth.aslx

This is the game.zip from my google drive
https://drive.google.com/open?id=1lscUYIXKV-1x2-ESVDBiMzr8B0K79-G7
I think the link should work.

Found this tutorial, and made most of it work. still not able to load multiple videos, but I think that may have something to do with the div tag id. Perhaps I need to give each video its own div tag id. can test that later.
https://imelgrat.me/javascript/youtube-iframe-api-javascript/

it is a mess, just a testing ground for learning about Quest and playing wit code.

The code and examples are in the page. There are two examples, one very basic, the other advanced using JQuery

I can get the video to load, but I am not getting the buttons to load with the JQuery command.

here is my code

game UI init script

this.roomDescription = loadYouTubeIframeAPI.description
mrangelFunction

loadYouTubeIframeAPI.description

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

function onYouTubeAPIReady() {
}

command: advanced load

game.roomDescription = advancedPlayerLoad.description
msg (Chr(60) + "div id=\"player-div\">" + Chr(60) +"/div>")
mrangelFunction

advancedPlayerLoad.desription

var player;


player = new YT.Player('player-div', {
      width: '562',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
            autoplay: 0,
            controls: 0,
            rel: 0,
            fs: 0,
            showinfo: 0,
            modestbranding: 1
      },
      event: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
      }
});

function onPlayerReady(event) {
      $('.btn').removeClass( 'disabled' );
}

$('#play').click(function(){ 
player.playVideo(); });

$('#pause').click(function(){
player.pauseVideo(); });

$('#stop').click(function(){
player.stopVideo(); });

$('#speed').click(function(){
      var rate = player.getPlaybackRate();
      player.setPlaybackRate(rate + 0.25);
});

$('#slow').click(function(){
      var rate = player.getPlaybackRate();
      if (rate > 0.25) {
            player.setPlaybackRate(rate - 0.25);
      }
});

$('#mute').click(function(){
      if(player.isMuted()) {
            player.unMute();
            $('#mute').text('Mute');
      }
      else
      {
            player.mute();
            $('#mute').text('Unmute');
      }
});

$('#volup').click(function(){
      var volume = player.getVolume();
      if (volume < 95) {
            player.setVolume(volume + 5);
      }
});

$('#voldown').click(function(){
      var volume = player.getVolume();
      if (volume > 5) {
            player.setVolume(volume - 5);
      }
});

function onPlayerStateChange(event) {
}

mrangelFunction

msg ("We are inside mrangelFunction")
jstring = game.roomDescription
jstring = Replace(jstring, Chr(60) + "br/" +Chr(62), "\n")
jstring = Replace(jstring, "«", Chr(60))
jstring = Replace(jstring, "»", Chr(62))
JS.eval (jstring)

I can get the video to load, but I am not getting the buttons to load with the JQuery command.

Maybe you could show the part of the code you're having a problem with? I'm on mobile right now so can't look inside the Quest file to find your code. The code that you put in this post looks fine to me, and seems to work. So if you're having problems with the code to create the buttons, maybe you can show the code that's supposed to create the buttons?

function onPlayerReady(event) {
      $('.btn').removeClass( 'disabled' );
}

$('#play').click(function(){ 
player.playVideo(); });

$('#pause').click(function(){
player.pauseVideo(); });

$('#stop').click(function(){
player.stopVideo(); });

$('#speed').click(function(){
      var rate = player.getPlaybackRate();
      player.setPlaybackRate(rate + 0.25);
});

$('#slow').click(function(){
      var rate = player.getPlaybackRate();
      if (rate > 0.25) {
            player.setPlaybackRate(rate - 0.25);
      }
});

$('#mute').click(function(){
      if(player.isMuted()) {
            player.unMute();
            $('#mute').text('Mute');
      }
      else
      {
            player.mute();
            $('#mute').text('Unmute');
      }
});

$('#volup').click(function(){
      var volume = player.getVolume();
      if (volume < 95) {
            player.setVolume(volume + 5);
      }
});

$('#voldown').click(function(){
      var volume = player.getVolume();
      if (volume > 5) {
            player.setVolume(volume - 5);
      }
});

Are you sure this code is being run after the buttons are created? I can't actually see the buttons, so it's hard to tell if there's anything else interfering with that.

here is all the code in the example from: https://imelgrat.me/javascript/youtube-iframe-api-javascript/

var player;

// This code loads the IFrame Player API code asynchronously. This is the Youtube-recommended script loading method
var tag = document.createElement("script");
tag.src = "https://youtube.com/iframe_api";
tag.id = "youtubeScript";
var firstScriptTag = document.getElementsByTagName("script")[1];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create youtube player (function called by YouTube API)
function onYouTubeIframeAPIReady() {
    player = new YT.Player("player-div", {
        width: "562",
        videoId: "M7lc1UVf-VE",
        playerVars: {
            autoplay: 0,
            controls: 0,
            rel: 0,
            fs: 0,
            showinfo: 0,
            modestbranding: 1
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}
// Player ready handler. Autoplay video when player is ready
function onPlayerReady(event) {
    $('.btn').removeClass( "disabled" );
}

$('#play').click(function(){ player.playVideo(); });

$('#pause').click(function(){ player.pauseVideo(); });

$('#stop').click(function(){ player.stopVideo(); });

$('#speed').click(function(){ 
    var rate = player.getPlaybackRate();
    player.setPlaybackRate(rate + 0.25); 
});

$('#slow').click(function(){
    var rate = player.getPlaybackRate();
    if (rate > 0.25)
    {
        player.setPlaybackRate(rate - 0.25); 
    }
});

$('#mute').click(function()
{
    if(player.isMuted())
    {
        player.unMute();
        $('#mute').text('Mute');
    }
    else
    {
        player.mute();
        $('#mute').text('Unmute');
    }
});


$('#volup').click(function(){ 
    var volume = player.getVolume();
    if (volume <= 95)
    {
        player.setVolume(volume + 5); 
    }
});

$('#voldown').click(function(){
    var volume = player.getVolume();
    if (volume > 5)
    {
        player.setVolume(volume - 5); 
    }
});
// Video state change handler.
function onPlayerStateChange(event) {

}

That javascript assigns a function to buttons that already exist on the HTML page, it doesn't create them.

Quest doesn't have those buttons built in, so you'll have to create them. For example:
msg("<button id=\"play\" class=\"btn\" role=\"button\">Play</button>")

Or you could modify the JS functions to actually create the button. For example:

var playbutton = $('<button>', {id: 'play', role: 'button'}).addClass('btn');
playbutton.click(function(){ player.playVideo(); });
AddText (playbutton);

Thanks mrangel

I have gotten this code to work

advance load command

game.roomDescription = advancedPlayerLoad.description
msg (Chr(60) + "div id=\"player-div\">" + Chr(60) +"/div>")
msg (Chr(60) + "button id=\"play\" class=\"btn\" role=\"button\">Play " + Chr(60) + "/button>")
mrangelFunction

advancedPlayerLoad.description exerpt

$('#play').click(function(){ player.playVideo(); });

on loading

on click play button

so that works to load it with the msg command before I call the function to load the player

However,

the javascript code doesn't seem to work.

var playbutton = $('<button>', {id: 'play', role: 'button'}).addClass('btn');
playbutton.click(function(){ player.playVideo(); });
AddText (playbutton);

I tried putting it in a room description and calling it with a command, I tried putting in the advancedPlayerLoad.description to be called as part of the YouTube API calls, and there is no button and no errors thrown.

How can I use the javascript version?