Forum Discussion
SurajJadhav-9b9
15 days agoCommunity Member
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.
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.
No RepliesBe the first to reply