Hi! I am trying to get a text adventure to run a 3-second Youtube video.

The main problems are: It takes so long to load up a Youtube video that by the time it does, my game has moved on to the clear screen and other actions I coded. (The 3-second video is supposed to just show the result of a player's command before the game triggers another event.)

I don't want to show the previews of other videos on my Youtube channel at the end. (The game should just clear screen and move on after the 3-second clip). Maybe I just need a way to shave off the ending of video, or to pause it. But it needs to auto-play and it needs enough time to load so that it's viewable at all, before the next event in my game.

So I thought I would make a loop that repeats the 3-second video, giving time for the video to load, in hopes that the player would be able to watch the 3-second clip before the next event fires.

I tried studying the main page on Youtube videos ("Adding Videos"), https://docs.textadventures.co.uk/quest/adding_videos.html, but I don't really understand where to put the JAVA script options that are listed under the section "Adjusting the Width of the Video." I don't need to adjust width, I just need to play the clip again in a loop, giving time for Quest to load the embedded Youtube screen and show it, before moving on.

I already copy-pasted in the "SetLastIframeID" coding (do I even need that?) into a new Function. But when I call the function in my game, do I put in the Youtube ID # in that call line, like this:

SetLastIframeID ("JuYE34wkLSi")

...I just made up a random sequence of # for that example, but that is where I'm guessing I put my youtube ID#. Or, am I supposed to do the call function like this: SetLastIframeID ("my-video").

And where do I put the Java Script for playing the video again? I mean, where exactly in my game do I place that line of JS ? It doesn't do anything when I put it right where it needs to be in the sequence of code, where events are firing. I.e., do I just throw in a line of JS right in the midst of Quest code like normal? I don't use JS normally, so I don't know.

And where do I put the Java Script for playing the video again?

If you want to pause the video and then resume it with a later function, you put the code to play it again when you want it to resume. If the video hasn't loaded, then trying to automatically press play will do nothing.

I'd suggest that in your case, you don't really want the video to loop. You just want it to continue the game when the video finishes. This should be relatively simple using the YouTube Player API… you can just set a state change event handler to trigger endWait when a video finishes. Then you can put a wait { in the Quest code after displaying your video, and the "Continue" button will get an automatic click at the end of the video. To be sure of not showing video recommendations, you could have the event handler hide the player when necessary.

Okay, that sounds like what I want it to do. So how do I do that? (sorry, I'm JS illiterate.)

I have copied the SetLastIframeID function into my game (did I need that?). And it looks like the Quest page "Adding Videos" in the tutorials has a list of JS commands for using/controlling the embedded video. But WHERE do the JS code lines go within my game -- just right in there where "regular" Quest code lines go? Or do they have to go in a special "Java"area?

Do I need to set up a Youtube Player API as well? I looked at the link you included, but it looks like it's for HTML coding, which I'm not sure how much will transfer over to Quest (which can use some HTML stuff, but...)

And 1 more newbie question: How do I use "endWait"? Is that Java script too? I tried looking it up on forums, but I can't recognize the kind of code people are using with that. How would I trigger the "Continue" at the end of the video like you mentioned using "endWait"?

I have copied the SetLastIframeID function into my game (did I need that?). And it looks like the Quest page "Adding Videos" in the tutorials has a list of JS commands for using/controlling the embedded video.

Those are mostly just for changing the size of the player and similar things.

But WHERE do the JS code lines go within my game -- just right in there where "regular" Quest code lines go? Or do they have to go in a special "Java"area?

You can put lines of javascript into a string, and then pass them to the Quest function JS.eval. If the lines start with JS. then they're already wrapped up in Quest code, so you can include them in any other script.

Do I need to set up a Youtube Player API as well? I looked at the link you included, but it looks like it's for HTML coding, which I'm not sure how much will transfer over to Quest (which can use some HTML stuff, but...)

You'll need to use the player API instead of the method in the Quest docs if you want your game to test or react to the video being loaded/played/finished.

And 1 more newbie question: How do I use "endWait"? Is that Java script too? I tried looking it up on forums, but I can't recognize the kind of code people are using with that. How would I trigger the "Continue" at the end of the video like you mentioned using "endWait"?

endWait is the javascript function that is called when the continue link is clicked on for a wait. So, for example, you could set the youtube API to call endWait() when the video finishes.

I started writing some code off the top of my head (not tested), but I'm posting without finishing this because I really need to do some work before midnight. I'll try to remember and come back to fix this later; or anyone with a decent grasp on Quest can probably finish it off:

$(function () {
  $.getScript("https://www.youtube.com/iframe_api", function () {
    var player;
    insertYouTubeVideo = function (id) {
      if (player) {
        addTextAndScroll ($('#youtubeplayer'));
        player.loadVideoById(id);
      } else {
        AddYouTube (id);
        player = new YT.Player($('iframe').last().attr('id', 'youtubeplayer')[0], {events: {
          'onStateChange': function (event) {
            if (event.data == YT.PlayerState.ENDED) {
              endWait();
            }
          }
        }});
      }
    }
  });
});

To take a completely different tack, what if you just converted your video to a non-looping .gif? Then just display it in the Quest picture frame.

Okay, wow, mrangel! This will be helpful, as I am sure I will want to do more stuff with embedded videos. For now, I feel out of my depth. JS is intimidating. But I could copy and paste stuff that works. And it's great to know how this kind of code relates to Quest and how it functions within the main body of code. Thank you!

Dcoder, yes, I thought of that -- I just don't know how to make .gifs. Do you know of a good guide for making them? It's my runner-up idea, but I'd prefer the Youtube video so that it can retain the sound effects. I might still make some .gifs for other parts of the game.

There are lots of free converters online -- just Google them. I don't have a specific recommendation, sorry.