Forum Discussion

SurajJadhav-9b9's avatar
SurajJadhav-9b9
Community Member
31 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.

 

ai assistant
Articulate 360
community
storyline 360
No RepliesBe the first to reply
Related Content