Forum Discussion

GregScheelar-e8's avatar
GregScheelar-e8
Community Member
4 months ago

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...
storyline 360
Nathan_Hilliard's avatar
Nathan_Hilliard
Community Member
4 months ago

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

 

  • Will_Findlay's avatar
    Will_Findlay
    Community Member
    4 months ago

    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.

     

Related Content