Forum Discussion
SAM-61bb1f52-bb
9 years agoCommunity Member
Add JavaScript to Youtube video
Hi,
I need to embed Youtube video in screen and after completing the screen a variable value will change.
How can I use JavaScript in webObject?
Will_Findlay
2 years agoCommunity Member
I am sorry for my tardiness in responding to your questions. So here is the overall process:
- Create a blank text file. (Open up Notepad for example). This will become your index.html file of your web object .
- Paste in that code I shared four years ago up above.
- Change this part of the code so that the video ID matches the video ID of your YouTube video:
videoId: '_kwZ-xeOj8Y'
- Save the file as "index.html" into an empty folder that you can name anything, e.g. webobject_folder. (If the attachment came through, you can alternatively download the attached index.html, change the videoId, and save it to an empty folder).
- Double-click on the index.html file and verify that the video will play in your web browser as expected.
If it won't play, the owners may have disabled embedding, or something else may be wrong (like the videoId is incorrect).
The videoId is what you see at the end of a YouTube URL:
So the videoId of this video would be VTz6epk3OEg:https://www.youtube.com/watch?v=VTz6epk3OEg
Once your index.html file works, your next step is to insert this as a web object in your Storyline slide. In a blank Storyline Slide:
- Insert > Web Object > Click the manila folder > Find the folder your index.html file is inside of and choose it. (You won't see your index.html file in there because you are choosing the folder). For example, C:\Users\wfindlay\Documents\webobject_folder
- Click "Choose Folder." (Sadly, you can't just choose the file for some reason). You should see something like this with the path to the folder where your index.html file is located:
- Click "Test Link..." to verify that Storyline got your web object.
- Click Ok. Your slide will now be filled with the Web Object.
- Create a Text variable in your project titled videoIsComplete. When the video completes, the value of the variable will be changed by the YouTube API to "Yes."
- Look at the story file I attached four years ago for how to set up your triggers. When the video completes, the variable will be set to "Yes" by the webobject. So when the slide timeline starts, set videoIsComplete to No. Then you can set up triggers that fire when this value changes to "Yes."