Forum Discussion

Nedim's avatar
Nedim
Community Member
3 days ago

Roneel​ To automatically advance to the next slide, you would need to insert your YouTube video as a Web Object using custom HTML. This allows you to connect to the YouTube IFrame API, which can detect when the video has finished playing.

When the video reaches the end, the script can change a Storyline variable (for example, videoEnd) to true.

Then, in the Storyline Trigger panel, create a trigger such as:

  • Jump to next slide
  • When variable changes
  • Variable: videoEnd
  • Condition: videoEnd = true

This setup will automatically advance the learner to the next slide once the YouTube video finishes playing. Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>YouTube Storyline</title>
</head>
<body>

  <!-- Your YouTube iframe -->
  <iframe
    id="ytplayer"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/3Op4hV4Hkcg?autoplay=1&mute=1&enablejsapi=1"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>

  <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    document.body.appendChild(tag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('ytplayer', {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerStateChange(event) {
      if (event.data === YT.PlayerState.ENDED) {
        var storylinePlayer = parent.GetPlayer();
        storylinePlayer.SetVar("videoEnd", true);
      }
    }
  </script>

</body>
</html>