Forum Discussion
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
- 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
- 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.
- 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
- Create a Variable:
- Create a new variable in Storyline, e.g., VideoComplete of type True/False.
- Set the initial value to False.
- 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);- 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
Step 4: Test and Publish
- Test the Interaction:
- Preview your slide to ensure the video plays, controls are hidden, and the video fits the web object without scroll bars.
- 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.
Is there a way to get the player to load automatically, similar to how Google Analytics does on every page? as I have three videos that I need to play, and the API won't run after the first time it's used.
If you want to play YouTube videos automatically, you need to mute their audio, as some browsers do not support the autoplay function otherwise.
