Forum Discussion

Roneel's avatar
Roneel
Community Member
9 days ago

Autoplay Youtube videos in Storyline

Hello!

 

I need help with auto playing my YouTube videos. Is it still true that it won't work in Chrome?

 

The embed code is: 

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

 

Also, once the video is done how do I get the slide to auto advance?

2 Replies

  • 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>

     

  • StevenBenassi's avatar
    StevenBenassi
    Staff
    4 days ago

    Hi Roneel​,

    Happy to help with this!

    You're correct. Some web browsers, such as Google Chrome, do not allow audio/video content to autoplay by default. However, you can work around this by updating your iframe URL to include an autoplay parameter:

    <iframe 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> 

    • autoplay=1 > attempts autoplay
    • mute=1 > required for Chrome autoplay compliance (videos must autoplay as muted)
    • enablejsapi=1 > needed if you require JavaScript control later.

     

    If you remove mute=1, Chrome will usually block autoplay unless the learner previously interacted with the Slide. Here's an example of the revised iframe URL after publishing to Review 360.

    Also, Storyline cannot natively detect when an iframe video finishes and force a Slide to auto-advance. You may be able to configure that behavior with the use of JavaScript. We have a lot of coding gurus here in the community. I'll open the floor so they can share their design suggestions with you!