Forum Discussion
Enable Next button upon completion of Youtube video
I am trying to set up a slide that has an embedded YouTube video, but I want to make sure that the Next button is not active until the end of the video. The only way I can figure out is to set it up with a trigger upon a certain point in the Storyline timeline (which is synced to the video). Is there any other way?
14 Replies
Hi Greg. I am also looking for an answer on this same question. Hopefully someone has an answer to this soon!
Perhaps look at the YouTube API reference, especially under Events (onStateChange):
https://developers.google.com/youtube/iframe_api_reference#Events
Try setting up an event handler in JavaScript.
If I were to desire this functionality, I would start there.
As a follow-up to this, I have attached a sample .story file that demonstrates how to detect the YouTube video events, like reaching the end of a video. It uses some JavaScript to attach the YouTube api to the embedded YouTube video. The normal route of connecting the api to the existing video did not seem to work, so this removes the original video and reinserts it, with the api attached, which does work.
Forgot the link...
Demo: https://360.articulate.com/review/content/3209aaa8-4ee2-4dc1-b8b5-d369c10a5600/review
Thank you Nathan! This is a great resource to have on hand! I've done something similar, but I thought I had to create my own custom webobject html file, which is kind of a pain.
What you are doing is much simpler.
I'm going to write this out so I remember what do do and in case other people find it useful. All you have to do is go to the YouTube you want, and click Share > Embed. Then copy that code YouTube gives you into a text editor, e.g.:
<iframe width="560" height="315" src="https://www.youtube.com/embed/DrpvkCRE2P4?si=4BBl-rHLLgE2D7us" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>Then all you have to do (to make it work with your example .story file) is add that id="myYTPlayer" parameter:
<iframe id="myYTPlayer" width="560" height="315" src="https://www.youtube.com/embed/DrpvkCRE2P4?si=4BBl-rHLLgE2D7us" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>Then go to your example Storyline file (or one with the javascript trigger you included), choose Insert > Video > Video from Website, and paste in that modified embed code. Then the ytEnded variable within Storyline will change to True when the YouTube file ends.
How would you recommend doing this for multiple videos in the same Storyline project?
Would this work for a Vimeo video stream? I am assuming the player would have to be adjusted.
See this example for the same basic functionality with Vimeo.
Demo: https://360.articulate.com/review/content/fe3c4baa-ab19-45f7-87a1-cb077b3d460c/review
The Vimeo API is much more straightforward.
Updated file attached.
This is great! Thank you so much for your quick reply.😁
Nathan_Hilliard I realize that I requested the help with making the next button appear after the video is finished. The sample you sent worked beautifully. I also did not want to allow learners to advance without viewing the video, so I turned off the controls in the embed coding which should have removed the controls but the scrub bar still shows up. It's that way in your demo also. Have you found a different way to disable this?
I don't use Vimeo, but it seems that managing the visibility of the player controls is a setting that gets controlled from your account, maybe on a per video basis. It may be a premium (paid) feature as well, not sure.
The player API provides no functions for the visibility of the controls, and since the video originates from an outside source, you cannot access it to apply custom styling either.
You could potentialy block out some or all of the controls with a transparent shape overlaid on your slide however.
Interesting. The overlay is a great idea. I got bogged down and it hadn't occurred to me. This issue is the same Youtube videos.
Thank you so much for this!
This worked perfectly! Thanks again.
