Forum Discussion

SurajJadhav-9b9's avatar
SurajJadhav-9b9
Community Member
15 days ago

How to Embed and Track YouTube Videos in Articulate Storyline Projects

Here’s a step-by-step guide to embedding a YouTube video in Articulate Storyline with the video controls hidden, the video fitting the web object, and tracking video completion:

Step 1: Prepare the HTML File

  1. Create an HTML File:
    • Open a text editor (e.g., Notepad, VS Code) and paste the provided HTML code into a new file.
    • Save this file as video.html.
<!DOCTYPE html>
<html>
  <head>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        overflow: hidden; /* Hides the scroll bar */
      }
      #player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>

    <script>
      // Load 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);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: 'RBtnt1fvpgA', // Replace with your video ID
          playerVars: {
            'enablejsapi': 1,
            'controls': 0,
            'modestbranding': 1,
            'rel': 0,
            'showinfo': 0,
            'iv_load_policy': 3
          },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
          // Video has ended, trigger a Storyline event
          parent.postMessage('videoEnded', '*');
        }
      }
    </script>
  </body>
</html>

*Replace 'RBtnt1fvpgA' with your YouTube video's ID.

Step 2: Embed the HTML in Articulate Storyline

  1. Add a Web Object:
    • Open your project in Articulate Storyline.
    • Go to the slide where you want to add the video.
    • Click Insert > Web Object.
    • Choose to link to a local file and browse to your video.html file.
    • Set the web object's dimensions to fit your slide and ensure it matches the aspect ratio of your video.
  2. Position the Web Object:
    • Resize and position the web object to fit neatly within your slide layout. Ensure that the web object size matches the desired video display size to avoid scroll bars.

Step 3: Track Video Completion

  1. Create a Variable:
    • Create a new variable in Storyline, e.g., VideoComplete of type True/False.
    • Set the initial value to False.
  2. Add JavaScript to Track Completion:
    • Go to the slide with the video.
    • Add a trigger to execute JavaScript when the timeline starts.
function receiveMessage(event) {
  if (event.data === 'videoEnded') {
    var player = GetPlayer();
    player.SetVar('VideoComplete', true);
  }
}
window.addEventListener('message', receiveMessage, false);
  1. Completion Trigger:
    • Add a trigger to perform an action (e.g., jump to the next slide, show a layer, or complete the course) when VideoComplete is True.
    • Completion Trigger 1
Completion Trigger 2

 

Step 4: Test and Publish

  1. Test the Interaction:
    • Preview your slide to ensure the video plays, controls are hidden, and the video fits the web object without scroll bars.
  2. Publish the Course:
    • Once everything is working correctly, publish your course. If you're tracking completion via an LMS, ensure that the tracking settings are configured correctly.

 

No RepliesBe the first to reply