Hello Heroes, I'm working on a medical course for clinical staff and have been asked to embed a YouTube video that is less than 3 minutes in the course. Further, they want to ensure the learner has watched the video before moving forward in the course, which is pretty common. My first challenge was getting the embed code to work properly with the requested start/stop point. I was able to fine tune that embed code from YouTube using Copilot and it works great in Storyline. Here's where I'm stuck. I embedded the video on a slide by itself. On the previous slide, I have a notice that coming up next is a video with audio, etc. Then, when they click "NEXT" it goes to the embedded video and starts playing. To prevent the learner from moving forward in the course until ensuring they have viewed the video, I thought I could disable the next button and set a trigger to go to the next slide when the timeline ends. However, because it's an embedded video, the timeline is 2-3 seconds, basically whatever I make it and it ends up advancing to the next slide before the video starts. I could adjust the timeline so that it runs for the 2:50 and have a layer pop up at the end with a button to move forward? What would you recommend me doing to accomplish this? The course includes another video that I'll have to configure as well, so I would really like to learn how to do this so that it works reliably with little complications. And yes, I have tested the embed code in our LMS and it starts/stops exactly where I want. Appreciate your insights and assistance learning how to make this happen.

randykepple By using Insert > Video > Video from Website, you can embed a YouTube video, but the embedded player does not expose the YouTube IFrame API, so events such as ENDED cannot be detected directly. A more flexible approach is to embed the video through a Web Object that loads a custom index.html. This allows you to initialize the YouTube IFrame API, listen for the player's onStateChange event, and detect when the video reaches the ENDED state. When that event occurs, use the Storyline Player API (GetPlayer().SetVar()) to update a Storyline variable (for example, videoComplete). You can then create a Storyline trigger to enable the Next button or advance to the next slide when that variable changes.Alternatively, if you want the Next button to be disabled each time the learner revisits the slide, disable it when the timeline starts and enable it only after the video reaches the ENDED state. This ensures the learner must watch the video to completion on every visit before the Next button becomes available. Example HTML and demonstration are provided below. <div id="player"></div> <script src="https://www.youtube.com/iframe_api"></script> <script> function onYouTubeIframeAPIReady() { new YT.Player("player", { width: "100%", height: "100%", videoId: "taIdxEH_Kus", events: { onStateChange(e) { if (e.data === YT.PlayerState.ENDED) { window.parent.GetPlayer().SetVar("videoComplete", true); //optionally enable the next button when the video is complete const next = window.parent.document.querySelector('#next'); next.classList.remove('cs-disabled'); } } } }); } </script>

randykepple I recommend reading Articulate's documentation on Web Objects, as it explains the feature more thoroughly than I can in a message. The implementation is fairly straightforward. The key requirement is that your web content is contained in a folder with an index.html file as its entry point. I recommend keeping this folder alongside your .story file so it is always included with the project when it is moved or archived. To insert the Web Object, add a Web Object to your slide, then right-click it and select Web Object Edit. Browse to the folder containing your index.html file, select the folder (not the file itself), and click OK. Storyline will automatically recognize and use index.html as the entry point. One limitation of this approach is that Web Objects cannot be previewed within Storyline's Preview mode. To test the functionality, you'll need to publish the project to Web, Review 360, or LMS. If your index.html communicates with Storyline by setting Storyline variables through the JavaScript API, it may not work when opening the published content directly from the local file system due to browser cross-origin (CORS) and security restrictions. For local testing, you should serve the files through a local web server (for example, using Visual Studio Code with Live Server or another local HTTP server such as http://127.0.0.1). Alternatively, publishing to Review 360 or an LMS also provides an appropriate hosting environment. If you make any changes to the HTML, JavaScript, or other assets in the Web Object index.html, I recommend renaming the Web Object folder before importing it into Storyline again. For example, if the original folder is named YouTube01, rename it to YouTube02. This helps ensure that Storyline imports the updated files instead of using a previously cached version of the Web Object. Otherwise, your changes may not be reflected after republishing. I've attached a ZIP archive containing: a sample Storyline project (.story), and the Web Object folder containing the index.html file. The sample demonstrates embedding a YouTube video and setting the Storyline variable videoComplete to true when playback reaches 170 seconds. That variable is then used to enable the Next button, which is initially disabled on the same slide. The HTML implementation is shown below: <div id="player"></div> <script src="https://www.youtube.com/iframe_api"></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '100%', width: '100%', videoId: 'UzFblFnvcGU', playerVars: { 'autoplay': 1, 'controls': 0, 'start': 30, 'end': 170, 'frameborder': 0 }, events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { window.parent.GetPlayer().SetVar("video01Complete", true); } } </script> OPTION 2: To avoid using an external Web Object and a separate index.html file, you can implement a more advanced JavaScript-based solution that embeds the YouTube player directly into a standard Storyline shape. The script identifies the target rectangle using either a custom accessibility label through the data-acc-text attribute or the shape’s unique data-model-id. It then dynamically creates a YouTube iframe player and continuously synchronizes its position and dimensions with the Storyline object, ensuring that the video remains precisely aligned within the rectangle. Because the solution uses the YouTube IFrame Player API, it can also monitor playback events. When the video reaches the defined endpoint, the script updates a Storyline variable, allowing you to enable navigation, display additional content, or mark the interaction as complete. The implementation is relatively easy to customize once you know which lines define the YouTube video ID, start time, end time, autoplay behavior, controls, and Storyline variable name. This solution can be tested on Slide 2 of the attached Storyline project file. const target = document.querySelector('[data-acc-text="youtubeContainer"]'); if (target) { // Remove previous player when revisiting the slide if (window.youtubePlayer?.destroy) { window.youtubePlayer.destroy(); } document.getElementById("youtubeVideo")?.remove(); // Reset Storyline variable GetPlayer().SetVar("video02Complete", false); // Create the player container const video = document.createElement("div"); video.id = "youtubeVideo"; Object.assign(video.style, { position: "fixed", zIndex: "1000", overflow: "hidden", borderRadius: "20px" }); document.body.appendChild(video); // Keep the video aligned with the Storyline rectangle const positionVideo = () => { const rect = target.getBoundingClientRect(); Object.assign(video.style, { left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, height: `${rect.height}px` }); }; positionVideo(); window.addEventListener("resize", positionVideo); window.youtubeResizeObserver?.disconnect(); window.youtubeResizeObserver = new ResizeObserver(positionVideo); window.youtubeResizeObserver.observe(target); // Create YouTube player const createYouTubePlayer = () => { window.youtubePlayer = new YT.Player("youtubeVideo", { videoId: "UzFblFnvcGU", playerVars: { autoplay: 1, controls: 0, start: 30, end: 170, playsinline: 1, rel: 0 }, events: { onReady: event => { event.target.seekTo(30, true); event.target.playVideo(); }, onStateChange: event => { if (event.data === YT.PlayerState.ENDED) { GetPlayer().SetVar("video02Complete", true); } } } }); }; // Load YouTube API only once if (window.YT?.Player) { createYouTubePlayer(); } else { window.onYouTubeIframeAPIReady = createYouTubePlayer; if (!document.getElementById("youtubeAPI")) { const script = document.createElement("script"); script.id = "youtubeAPI"; script.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(script); } } }

I used to work for a Level I Trauma Center attached to a medical university, and it was a constant uphill battle combatting the rampant MIS-information regarding the use of content lifted from the Internet. "Oh, but we're a TEACHING hospital, so it's okay." Um, not it is not. "Teaching Hospital" is not some sort of magical shield from copyright infringement. "Fair use!" Again, not applicable. I can't tell you how many times I would see a watermarked photo from Getty, Shutterstock, or other site in a PowerPoint. There's a REASON the photo is watermarked. If you want the UN-watermarked version, you need to license it.It wasn't until I and a few other developers started refusing to upload pirated images like those into the LMS that the practice was curtailed.

randykepple Sorry about that. I wish I could be more helpful. I'm sure it's one of those things we all tend to overlook or miss along the way. I've embedded videos and connected them to Storyline many times, especially videos hosted on Vimeo. If there's anything else I can do to help, or if you'd like me to set it up for you, I'd be more than happy to. I wish you all the best with your project!

Nedim I appreciate your amazing skill set and generosity in offering to help. Our nursing staff that I work with in creating these eLearnings rely too heavily on content they find on YouTube and we should be creating our own content, so this is a good opportunity to underline that a bit. It's great you can do this and I applaud those who have a coding background that they can apply to this, but my background is with Wordpress, html, and CSS, so Javascript is not foreign, but trying to troubleshoot between the LMS, YouTube, our security protocols... it's prone to break at some point and I'm the only one, so that would be akin to creating a problem that's looking for a home. :)Great community! If you ever need help with photos or pixels, I'm your guy, lol!

Embedded Videos and Locked Navigation

20 Replies

AndrewBlemings-
Community Member
1 month ago
I stretch the timeline, yeah. I just extend it the full length of the video. You'd still be able to use the trigger that sends the learner to the next slide when the timeline ends.
randykepple
Community Member
1 month ago
The challenge I'm facing with this method is that the timing is not aligning with the parameters set for the embed code. For some reason, there is just enough of a delay that the video ends before the timeline. I've made some adjustments, but it's still not how I'd like it to work. The bigger issue is that you can't preview the changes until you publish the course to the LMS, so it's a LOT of back/forth.
CarlFink1
Community Member
1 month ago
Couldn't you use the "When the media completes" trigger?
- randykepple
  Community Member
  1 month ago
  I appreciate that suggestion, and I did test adding a trigger but because the video is embedded using Insert > Video > Video from Website there is no way for Storyline to know when the embedded video has completed. I added parameters to the embed code to start/stop the video where they wanted it, but that isn't communicated or connected to the trigger.
  - Nedim
    Community Member
    1 month ago
    randykepple
    
    By using Insert > Video > Video from Website, you can embed a YouTube video, but the embedded player does not expose the YouTube IFrame API, so events such as ENDED cannot be detected directly.
    
    A more flexible approach is to embed the video through a Web Object that loads a custom index.html. This allows you to initialize the YouTube IFrame API, listen for the player's onStateChange event, and detect when the video reaches the ENDED state. When that event occurs, use the Storyline Player API (GetPlayer().SetVar()) to update a Storyline variable (for example, videoComplete). You can then create a Storyline trigger to enable the Next button or advance to the next slide when that variable changes.
    
    Alternatively, if you want the Next button to be disabled each time the learner revisits the slide, disable it when the timeline starts and enable it only after the video reaches the ENDED state. This ensures the learner must watch the video to completion on every visit before the Next button becomes available.
    
    Example HTML and demonstration are provided below.
    
    <div id="player"></div> <script src="https://www.youtube.com/iframe_api"></script> <script> function onYouTubeIframeAPIReady() { new YT.Player("player", { width: "100%", height: "100%", videoId: "taIdxEH_Kus", events: { onStateChange(e) { if (e.data === YT.PlayerState.ENDED) { window.parent.GetPlayer().SetVar("videoComplete", true); //optionally enable the next button when the video is complete const next = window.parent.document.querySelector('#next'); next.classList.remove('cs-disabled'); } } } }); } </script>
sarah02
Community Member
1 month ago
Storyline can't tell when an embedded YouTube video has finished, so the Next button can't be unlocked automatically. A simple workaround is to match the slide timer to the video's length and show the Next button only after that time has passed.
- CarlFink1
  Community Member
  1 month ago
  Will that work if the viewer pauses the video and doesn't restart it for, say, one minute?
  - randykepple
    Community Member
    1 month ago
    All of this is a non-starter if I can't get the embed script to work and it's not, despite my best efforts, the assistance and insights from Nedim and others and hours of testing and AI troubleshooting. I'm done trying to make this work. They also want this activity gated, so they can ensure the video was watched before moving forward in the course. I'm just going to capture a screen recording of the video using Camtasia and creating my own MP4 file that I can drop into my course and program. Frustrating beyond words that embedding a YouTube video in today's modern world is so fraught with challenges like this. :)