Add JavaScript to Youtube video

Mar 24, 2016

Sagar Mavale
By Sagar Mavale

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?

8 Replies
Ashley Terwilliger-Pollard
8 years ago03/24/16 at 11:52 am (UTC)

Hi Sagar,

I haven't seen a lot of examples where the Javascript was embedded into a web object, and as it's something we don't offer support for, I'll have to defer to the community for additional assistance. I have seen some threads where the Javascript was used to open the web object and you may want to investigate this thread and this one, perhaps even reaching out to those users to see if they're able to assist you further. 

Will Findlay
over 4 years ago08/27/19 at 6:10 pm (UTC)

Here is some code you can use to do this. Insert this into your storyline file as a webobject... For some reason using a boolean variable doesn't work well in Storyline, so I just use a Text variable. Here is example: https://360.articulate.com/review/content/c0db799e-4921-4dbc-8fa4-00c38edbb76b/review

 

<html>
<head>
<style>
html, body {
margin: 0 0 0 0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="player"></div>

<script src="https://www.youtube.com/player_api"></script>

<script>

// create youtube player
var isComplete = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
playerVars: {rel:0},
videoId: '_kwZ-xeOj8Y',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

//autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
var isComplete = true;
console.log(isComplete);
var player = parent.GetPlayer();
player.SetVar("videoIsComplete","Yes");
}
}

</script>
</body>
</html>

Will Findlay
8 months ago09/06/23 at 5:06 pm (UTC)

I am sorry for my tardiness in responding to your questions. So here is the overall process:

  1. Create a blank text file. (Open up Notepad for example). This will become your index.html file of your web object .
  2. Paste in that code I shared four years ago up above.
  3. Change this part of the code so that the video ID matches the video ID of your YouTube video: 
    videoId: '_kwZ-xeOj8Y'
  4. 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).
  5. 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
  6. 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:
    1. 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
    2. 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:

      the dialog box of a web object inserted from a documents folder
    3. Click "Test Link..." to verify that Storyline got your web object.
    4. Click Ok. Your slide will now be filled with the Web Object.
  7. 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." 
  8. 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."

 

Sign In to Reply