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.Customizable "Invalid Answer" as a Feedback Master
Greetings, I would like to suggest adding a feedback master to properly edit the "invalid answer" or "You must answer before proceeding" prompt. Please note that we currently have "Correct Answer", "Incorrect Answer", "Retry", "Review" and "Thank you". I'm aware that the "Invalid answer" is a player prompt and not a slide one, but having the ability to customize it like other feedbacks would greatly help homogenizing our designs. Thanks in advance :)Make states' position relative to original slide
Please change this, or at least make it an option. It is difficult to line things up to the pixel when I cannot simply type in the position to match that of an object on the slide. What should be easy can be next to impossible. Example: I currently have a slide with ten icons in black. I want different icons to change color based on where the user is hovering. This should be easy: make a new state, have the recolored icons in the same position as their corresponding black icons. However, I can't just type in the same position as the originals, so I have to try to line it up. Of course, they look great in the editing window, but when I go to preview, they've jumped off by one or two pixels, and then I publish it and they're in yet a slightly different position. Please allow us to just type in the same x and y coordinates that I had on our original slide. Maybe it's me, but I have not yet found a use for the position being relative to the state object instead.New Characters und Custom Colour for clothes
Hello everyone, thanks for the great support at all times and congratulations on the new site. I think it would be great to have a new selection of characters in Storyline & Rise. I find the realistic ones a bit outdated and not really modern. It would also be cool to dye the colour of the clothes so that you can adapt it to the CI. I also wonder why you can only use real photos in the scenario block in Rise and not illustrations. Just an overall idea. Best regardsSOCIAL LEARNING in Articulate Rise
I LOVE Articulate Rise but... I am aware of the fact that the possibilities for Social Learning with these courses are none. And what I mean by that is the letting the learners to drop comments about specific sections of the course and have replies and interactions with those comments. I know it is hard to develop something from scratch but... wait a minute! That is exactly what the REVIEW 360 section does with the courses. What if.... Articulate uses the same engine to manage comments already available for Review 360 and let us use it to be able to add comments to blocks of the course?? Please respond or vote to this if you agree. I am not optimist, but you never know.Rise 360 Theme update
With accessibility being critical could there be some future enhancements for changing theme colors for fonts and buttons? We have brand color requirements and there are too many limitations for setting theme colors for fonts and buttons. This would be a huge help to ensure course designers are meeting accessibility requirements. It would be an amazing upgrade if users had options to edit buttons and title fonts that don't carry through and change the entire course.Custom Animation tool for Storyline
Hello Community! I need to post more here 😃. Just presented at the Articulate User Conference (2024). I shared a tool I built to generate custom JavaScript snippets to get custom GSAP (GreenSock) animations in Storyline. Here is my blog post about it and link to the tool. Link to Tool: https://learningdojo.ninja/javascript-snippets/gsap/ Hope it helps!
Inline images in Rise
Being able to add inline images in paragraphs, tab interactions, and accordions: Only allowing for images at the bottom of the tab or accordion can sometimes make it difficult to really tell a story or show a process. And on that same note, being able to include more than one image per would be extremely helpful!Multilingual player for Storyline
Hello, We need a multilingual player for Storyline. Background: In the company, we create multilingual modules. Unfortunately, in Storyline, you can only specify one language per file in the player. To create multilingual courses in Storyline, we restrict the player as much as possible and store the desired languages for all messages. The content structure is confusing for multilingual courses and must be deactivated. Sometimes it is not desirable to create two separate courses. The idea: For multilingual courses in Storyline, it should be possible to select the language for each scene and/or each slide. Example image: Top: Language selection question Left: German with German player Right: English with English player How do others see this? Do you also have a similar problem? Have a nice day. Michael
